如何在 DIV 容器中制作具有动态高度的响应式视频背景？

Question

我一直在寻找一种为 header DIV 创建视频背景的方法（最好是 HTML5 / CSS-only 解决方案）micro-site.

显然，如果您想要应用到整个页面的固定背景（位置：固定；）或者如果您的 DIV 具有固定高度，那么有很多资源可以说明如何执行此操作，但我想将其应用于具有动态高度属性的单个 DIV（巧合的是，在 Bootstrap 框架内）。

它的 min-height 值为 100vh，但是 DIV 的高度应该可以更大，具体取决于其中的内容（在这种情况下，我有几个在较小的屏幕上可能需要滚动一些介绍性段落）。

我用我原来的方法已经完成了一半，但我的视频有一点超出了容器 DIV 并给容器一个 overflow:hidden;属性没有帮助。

Here's a CodePen 加上下面的代码 + Bootstrap 这样你就可以看到我在说什么了。

Screenshot of the video extending into the next DIV, just in case.

这基本上是我的 90% 方式选项的相关代码...（看起来视频采用这种方式采用 100% 宽度，但它不会裁剪容器的高度）：

<div class="content contain-header">
  <div class="container">
    <div class="row main-header">

      <video autoplay loop poster="images/clouds.jpg" id="bgvid">
        <source src="images/clouds.webmhd.webm" type="video/webm" />
        <source src="images/clouds.mp4" type="video/mp4" />
      </video>

      <div class="col-md-2 col-xs-1">
      </div>
      <div class="col-md-8 col-xs-10">
        <img src="images/logo.svg" class="header-logo" />
        <h1 id="header-you">Wow</h1>
        <p>Business model canvas rockstar user experience founders handshake. Startup responsive web design bootstrapping first mover advantage disruptive crowdfunding. User experience iteration seed money rockstar holy grail deployment prototype gen-z backing influencer handshake success. Virality growth hacking innovator product management iPad.</p>
            <p>Crowdsource marketing non-disclosure agreement graphical user interface bootstrapping market research & development:</p>
            <p class="punch">Stratup Ipsum!</p>
            <p class="continue"><a href="#next"><span class="glyphicon glyphicon-menu-down"></span></a></p>
          </div>        
          <div class="col-md-2 col-xs-1">
          </div>
        </div> 
      </div> 
</div>

和相关的CSS，格式为SCSS (+Bootstrap v3.3.5):

.contain-header {
  background-color: rgba(0, 0, 0, 0.6);
    .main-header {
      min-height:100vh;
      display:block;
      color:$color-white;
        video#bgvid {
          position:absolute;
          top:50%;
          left:50%;
          min-width:100%;
          min-height:100%;
          width:auto;
          height:auto;
          z-index:-100;
          -ms-transform: translateX(-50%) translateY(-50%);
          -moz-transform: translateX(-50%) translateY(-50%);
          -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
          background: url(../images/clouds.jpg) no-repeat;
          background-size: cover;
        }
        video {
          display:block;
        }
        .header-logo {
          max-width:40%;
          height:auto;
          margin:0 auto;
          display:block;
          padding-top:20px;
        }
        h1#header-you {
          text-transform:uppercase;
          text-align:center;
          font-family:$tultra;
        }
        p {
          font-size:2rem;
        }
        p.punch {
          font-size:2.3rem;
          text-align:center;
          margin-top:30px;
        }
        .continue {
          text-align:center;
          padding-top:20px;
          padding-bottom:40px;
            a, a:visited {
              color:$color-white;
              text-decoration:none;
            }
            a:hover {
              color:$color-gray-icons;
              text-decoration:none;
            }
        }
        @media screen and (max-width: 767px) {
          p {
            font-size:1.4rem;
          }
          p.punch {
          font-size:1.8rem;
          }
        }
    }
}

Answer 1

尝试将其添加到样式的开头

.contain-header {
  position: relative;
  overflow: hidden; 
  background-color: rgba(0, 0, 0, 0.6);
  ...

contain-header 上的相对位置表示视频的最小高度、最小宽度等是相对于它的。

如何在 DIV 容器中制作具有动态高度的响应式视频背景？

How to make responsive video background in DIV container with dynamic height?

css

video

background

html5-video

twitter-bootstrap