作爲網站標題背景的全屏視頻

我在嘗試解決此問題時遇到問題。我有一個客戶端需要網站標題需要有一個視頻作爲背景，其上有一個黑色圖層，並通過視頻覆蓋，還會有一些文本（如h1,span等）。到目前爲止，我的嘗試沒有奏效。作爲網站標題背景的全屏視頻

我搜索了一下，發現了一些老問題，但沒有一個能夠工作。

這個概念非常簡單。我有3個div的在我的部分被稱爲「英雄」：

視頻 - 疊加：這是視頻
視頻包裹黑暗覆蓋：這包含了視頻元素
英雄內容：本包含將要在視頻上顯示的h1，span等元素。

HTML

<section class="hero" id="hero"> 
    <div class="video-overlay"></div> 

    <div class="video-wrap"> 
     <video autoplay="autoplay" muted="muted" loop="loop" poster="media/img/vid-placeholder.jpg" class="bg-video"> 
       <source src="media/vid/amazon.mp4" type="video/mp4"> 
     </video> 
    </div> 

    <div class="row hero-content text-center"> 
     <div class="col-md-12"> 
      <img src="media/img/logo-white-2x.png" class="logo animated fadeInDown" /> 
      <h1 class="animated fadeInDown">The leading, most customer friendly and hassle-free refund service since 2005.</h1> 
      <a href="#buy" class="use-btn animated fadeInUp">Claim now</a> <a href="#about" class="learn-btn animated fadeInUp">Learn more</a> 
     </div> 
    </div> 
</section>

CSS

.hero { 
    position: relative; 
    color: #fff; 
    width: 100%; 
    height: 100%; 
} 
.video-overlay { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    background: #000000; 
    opacity: 0.6; 
    height: auto; 
    width: 100%; 
    z-index: 1; 
} 
.video-wrap { 
    display: block; 
    overflow: hidden; 
    z-index: -999; 
} 
.bg-video { 
    min-height:100%; 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
    z-index: -999; 
} 
.hero-content { 
    position: relative; 
    z-index: 5; 
}

有了這個代碼，我得到這樣的結果：http://prntscr.com/8y3uau 視頻下顯示其文本如下所示：http://prntscr.com/8y3uok

Here是一個很好的模板，您可以用它作爲示例來了解如何顯示視頻&文本。

我也希望視頻能夠響應。

其他信息：

我用引導的網站
視頻也可以在YouTube上找到的響應部分，所以如果你有一個想法，和YouTube視頻，而不是比使用<video>標籤沒關係。

非常感謝任何人提前！

來源

2015-11-02 Nicolas D.V.

您應該將絕對位置用於移動部分的覆蓋和媒體查詢。那麼多我可以幫助你。我不會做你的工作。 – Ionut

不知道這個問題，JSFiddle會幫助理解。但是對於我所看到的，它看起來像是在整頁視頻下面有文本（.hero-content），所以也許將視頻（.video-wrap）定位爲絕對將解決堆疊問題。 – leuquim

謝謝你的建議。我解決了這個問題，所以我會回答這個問題，顯示出適合我的解決方案，但再次感謝您，因爲您的建議讓我朝着正確的方向發展！ :) –

我遵循了我收到的建議，並與CSS玩了一下，最終使用下面的代碼解決了問題。再次感謝@Ionut和@Leuquim！

HTML

<section class="hero" id="hero"> 
    <div class="video-overlay"></div> 
    <div class="video-wrap"> 
     <video autoplay="autoplay" muted="muted" loop="loop" poster="media/img/vid-placeholder.jpg" class="bg-video"> 
      <source src="media/vid/amazon.mp4" type="video/mp4"> 
     </video> 
    </div> 
    <div class="container"> 
     <div class="row hero-content text-center"> 
      <div class="col-sm-12 col-md-12 col-lg-8 col-lg-offset-2"> 
       <img src="media/img/logo.png" class="logo animated fadeInDown" /> 
       <h1 class="animated fadeInDown top-bottom-borders">The leading, most customer friendly and hassle-free refund service since 2005.</h1> 
       <a href="#buy" class="use-btn animated fadeInUp">Claim now</a> <a href="#about" class="learn-btn animated fadeInUp">Learn more</a> 
      </div> 
     </div> 
    </div> 
</section>

CSS

.hero { 
    position: relative; 
    min-height: 800px; 
    color: #fff; 
} 
.video-overlay { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: #000000; 
    opacity: 0.8; 
    z-index: 1; 
} 
.video-wrap { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 
.bg-video { 
    height: 100%; 
    min-width: 100%; 
    width: auto; 
    overflow-y: hidden; 
    z-index: -999; 
} 
.hero-content { 
    position: relative; 
    top: 120px; 
    z-index: 5; 
}

注：我的頁面也使用Bootstrap爲響應部分（網格系統）。

來源

2015-11-04 15:20:51

作爲網站標題背景的全屏視頻

回答

相關問題