Question

我正在尝试使用div标签为我的网站使用不同的视频，我还希望覆盖要显示的文本。但每当我在div中使用其他视频作为背景时，它只显示一个完全<html>的视频而不是另一个视频。
我的代码如下。

<div class="video-overlay"></div>

<video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>

现在，如果我放入另一个背景视频，那么它将无法显示..只有第一个视频显示。

Answer 1

.container { position:relative; }
.container video {
    position:relative;
    z-index:0;
}
.overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

<div class="container">
    <video id="video" width="770" height="882" onclick="play();">
        <source src="video/Motion.mp4" type="video/mp4" />
    </video>
    <div class="overlay">
        <p>Content above your video</p>
        <form>
            <p>Content Below Your Video</p>
            <label for="input">Form Input Label</label>
            <input id="input" name="input" value="" />
            <button type="submit">Submit</button>
        </form>
    </div>
</div>

或

<video loop autoplay muted poster="path/to/screenshot.jpg"> <source src="path/to/video.webm" type="video/webm"> <source src="path/to/video.ogg" type="video/ogg"> <source src="path/to/video.mp4" type="video/mp4"> </video>

Answer 2

你可以简单地使用CSS。

.video-overlay{
 position:absolute;
  z-index:9999999999;
}

<div class="video-overlay">Any Text</div>

<video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>

如何在背景视频上叠加文字？

2 个答案: