HTML5部分背景視頻-全屏

Question

因此，我使用此頁面作為參考： 全屏HTML5部分背景視頻和博客文章： http : //demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video但是，在stackoverflow中，最終解決方案從未發布過，我無法獲得最佳答案以解決我的問題。 我使用包含所有html和css的示例圖像創建了一個Codepen： 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