css - HTML5 部分背景视频 - 全屏

Question

所以，我使用此页面作为引用:Fullscreen HTML5 Section Background Video 和一篇博文: http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video 然而，在 stackoverflow 中，最终的解决方案从未发布过，而且我无法获得适合我的案例的最佳答案。我使用包含我所有 html 和 css 的示例图像创建了一个代码笔: http://codepen.io/emmajean/pen/nyhFL

我正在努力让视频成为显示的第一张图片，并成为“保护和发展您的品牌与我们的产品搜索现在的品牌”一词的“背景”。 第二部分是静态图片背景，已经可以正常工作，但显然没有作为单独的部分显示，该部分应该有“不用担心 Safegaurd ...”文本。 HTML:

<section class="video-holder">
<!--begin test search background vid-->
 <section class="search-holder">
 <div id="video_container" style="overflow: hidden; background-size: cover;">
  <div class="carousel2-block">
   <h1><br /><br />PROTECT &amp; GROW YOUR <br /> BRANDS WITH OUR PRODUCT</h1>
   <h2>Search now through your favorite brands</h2>
   <video autoplay="autoplay" loop="loop" id="bgvid">
    <source src="http://taxify.co/wp-content/uploads/2014/06/file.mp4" type="video/mp4"/> 
   </video>
  </div>
 </div>
</section>
<!--end test search-->
</section>

CSS:

#video_container {
 bottom: 0;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
 background: url(polina.jpg) no-repeat;
 min-height: 720px;
}
#bgvid {
 min-width: 100%;
}

如有任何提示或提示，我们将不胜感激!

Answer 1

您需要做的是将两个面板堆叠在一起。

这里的问题是，视频的主题区域并不真正适合在高度较短的情况下被拉宽。太多的注意力会丢失。

也许加长高度会更好？

就第二个面板而言，使用具有所需高度的 background-size: cover 而不是通过 HTML 加载图像。

这是一支笔:http://codepen.io/anon/pen/solgw