Question

所以，我使用此页面作为参考：Fullscreen HTML5 Section Background Video 和博客文章： http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video 但是，在stackoverflow中，最终的解决方案永远不会发布，我无法在我的案例中得到最佳答案。我使用包含所有html和css的示例图像创建了一个codepen： http://codepen.io/emmajean/pen/nyhFL

我试图让视频成为第一个显示的图像，并成为＆＃34;背景＆＃34;通过我们的产品保护和发展您的品牌，立即搜索。第二部分是静态图片背景，已经工作正常，但显然没有显示为一个单独的部分，该部分应该有＆＃34;担心不再是Safegaurd ...＆＃34;文本。 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

HTML5部分背景视频 - 全屏

1 个答案: