如何处理全屏、响应式背景视频？

Question

我正在尝试将背景视频设置为全屏。

我可以做到这一点height: 100vh;和width: 100%;，但只要从16比例的变化：9，我开始变得空白。

我也尝试过使用 objectobject-fit: cover;但这似乎到处都是，我很难控制它。它也没有得到广泛支持（IE 11 和 edge 15 不支持它）。

我不确定我是否也在使用 bootstrap 4 使事情复杂化。

我的 HTML 是这样布局的

<div class="container-fluid home-page">

  <video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
      <source src="/wp-content/themes/_underscores/assets/Placeholder-Video.mp4" type="video/mp4">
    </video>

    <div class="row clients">

        <div class="client-slider col-12">

            <?php foreach($clients as $key => $client) : ?>
                <div class="client-logo" style="background-image: url(<?php echo $client->featured_image; ?>)"></div>   
            <?php endforeach; ?>

        </div>

    </div>              

    <div class="row">

        <div class="col-md-6 col-xs-12 info-text">
            <h3>Title</h3>
            <p>Content....</p>
            <a href="#" class="button blue no-margin">SEE HOW IT WORKS</a>
        </div>

        <div class="col-md-6 col-xs-12 backgroundg">
        </div>


    </div>

</div>

一旦我定位了视频元素，它下面的所有内容（即 .clients）都会浮到顶部，因为视频元素被从常规文档流中取出。我可以提供 .clientsmargin-top: 100vh;但随后我需要提供视频元素object-fit: cover;，它会淹没整个文档作为背景。

只是为了让您了解我的 css (sass) 到目前为止：

video {
  object-fit: cover; 
  width: 100vw;
  height: 100vh;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.clients{
  margin-top: 100vh;
}

我一直在看几个教程，比如https://slicejack.com/fullscreen-html5-video-background-css/和http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video但我不认为在那里的例子中，他们在全屏视频下方有内容。

谢谢。

Answer 1

Ended up doing this:

HTML:

<div class="video-container">
    <video playsinline autoplay muted loop poster="" id="bgvid">
      <source src="/wp-content/themes/_quander/assets/QUANDER_PITCH_CUT_3.mp4" type="video/mp4">
    </video>

</div>

<div class="container-fluid home-page">

    <div class="row clients">

        <div class="client-slider col-12">

            <?php foreach($clients as $key => $client) : ?>
                <div class="client-logo" style="background-image: url(<?php echo $client->featured_image; ?>)"></div>   
            <?php endforeach; ?>

        </div>

    </div>              

    <div class="row">

        <div class="col-md-6 col-xs-12 info-text">
            <h3>Title</h3>
            <p>Content....</p>
            <a href="#" class="button blue no-margin">SEE HOW IT WORKS</a>
        </div>

        <div class="col-md-6 col-xs-12 backgroundg">
        </div>


    </div>

</div>

css:

.video-container{
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    video {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
    }
}

.home-page{
    margin-top: 100vh;
}

So keeping the .home-page margin-top to 100vh stops the content riding up and overlapping the video.

The video is then dynamic (to the extent of being 100% vw and vh). Then having the overflow: hidden; on the .video-container stops the video flowing all over the page.