Question

我一直在寻找一种方法来为一个小型网站上的标题DIV创建一个视频背景（最好是一个HTML5 / CSS-only解决方案）。

显然，如果你想要一个适用于整个页面的固定背景（位置：固定;）或者你的DIV有一个固定的高度，但是我想申请，有很多关于如何做到这一点的资源它与动态高度属性的单个DIV（在Bootstrap框架内，巧合）。

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

我用原来的方法将它放在那里一半，但是我的视频的一部分延伸到了容器DIV之外并且让容器溢出：隐藏;属性没有帮助。

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);
  ...

包含标题上的位置相对意味着视频最小高度，最小宽度等与之相关。

如何在动态高度的DIV容器中制作自适应视频背景？

1 个答案: