作为网站标题背景的全屏视频

问题描述：

我在尝试解决此问题时遇到问题。我有一个客户端需要网站标题需要有一个视频作为背景，其上有一个黑色图层，并通过视频覆盖，还会有一些文本（如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>标签没关系。

非常感谢任何人提前！

您应该将绝对位置用于移动部分的覆盖和媒体查询。那么多我可以帮助你。我不会做你的工作。 – 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为响应部分（网格系统）。

作为网站标题背景的全屏视频

相关推荐