Jquery 全屏视频作为站点标题背景

我在试图解决这个问题时遇到了问题。我有一个客户要求站点标题需要有一个视频作为背景，上面有一个暗层，视频和覆盖层上也会有一些文本（如

h1

，

span

，等等）。 到目前为止，我的尝试没有成功

我在谷歌上搜索了一下，发现了一些老问题，但没有一个有效

这个概念非常简单。我在我的“英雄”部分有3个部门：

• 视频覆盖：这是视频的暗覆盖
• 视频换行：包含视频元素
• 英雄内容：包含将在视频中显示的

  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>

<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>

使用此代码，我得到以下结果： 视频下方显示的文本如下所示：

这是一个很好的模板，您可以使用它作为示例来了解视频和文本的显示方式。

我还希望视频能够响应

其他资料：

• 我对站点的响应部分使用引导
• 视频也可以在youtube上找到，所以如果你想用youtube视频而不是使用
  标签，那没关系

---

在此之前，非常感谢所有人

我遵循收到的建议，使用

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="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>

<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>

---

注意：我的页面也对响应部件（网格系统）使用了

引导程序。
您应该对覆盖和移动部件的媒体查询使用绝对位置。我能帮你这么多。我不会做你的工作。不确定这个问题，JSFIDLE会帮助你理解。但就我所见，看起来您在整页视频下面有文本（.hero content），因此可能将视频（.video wrap）定位为绝对将解决堆叠问题。谢谢你们两位的建议。我解决了这个问题，所以我将回答这个问题，展示对我有效的解决方案，但再次感谢您，因为您的建议将我推向了正确的方向！：）