Question

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

我可以使用height: 100vh;和width: 100%;实现这一目标，但只要比率从16：9变化，我就会开始获得空格。

我也尝试过使用对象object-fit: cover;，但这似乎遍布整个地方，我很难控制它。它也没有得到广泛的支持（I.E 11和and 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 margin-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

结束这样做：

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;
}

因此，将.home-page margin-top设置为100vh可以阻止内容重叠并重叠视频。

然后视频是动态的（达到100％vw和vh的程度）。然后，overflow: hidden;上的.video-container会阻止视频流过整个页面。

Answer 2

可以使用以下代码添加自适应视频：

<div class="video_wrapper">
  <video width="640" height="360" controls="" autoplay=">
    <!-- MP4 must be first for iPad! -->
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><!-- Safari / iOS, IE9 -->
    <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><!-- Chrome10+, Ffx4+, Opera10.6+ -->
    <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"><!-- Firefox3.6+ / Opera 10.5+ -->    
    </video>
</div>

.video_wrapper { 
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video_wrapper video { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 3

这对你有用。我已从container-fluid中移除填充并使用了引导类embed-responsive。

＆＃13;

.home-page{
  padding: 0 !important;
  overflow: hidden;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid home-page">
    

    <div class="embed-responsive embed-responsive-16by9">
      <video playsinline autoplay muted loop poster="polina.jpg">
          <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
      </video>
    </div>

    <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>

＆＃13;

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

3 个答案: