Question

目前我正在制作完整的视频背景设置。这是一个新手问题。我想在视频上添加文字。我在这里搜索了一些教程并尝试了一些东西，但却无法让它工作。

代码：

<div class="video"><iframe allowfullscreen="" frameborder="0" height="540"            mozallowfullscreen="" src="//player.vimeo.com/video/99315264? title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" webkitallowfullscreen="" width="960"></iframe>


    <style type="text/css">body {
    margin: 0;
    padding: 0;
     }
    .Video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%}


     .Video iframe {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    }

    .Video .Overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.0);
    }
    </style>

代码工作正常，但我想添加一些文字叠加。我一直在阅读教程，但我似乎无法找到合适的人选。简单的问题我肯定。谢谢您的帮助。

使用此格式时

示例：

 <video autoplay loop>
 <source src=”loop.mp4” type=”video/mp4”>
 <source src=”loop.webm” type=”video/webm”>
 <source src=”loop.ogv” type=”video/ogg”>
 </video>

vimeo视频没有正确加载 - 404错误 - 所以我使用了iframe设置 - 似乎是诀窍。我正在使用Vimeo视频，因为我有一个付费帐户，允许我自定义视频设置并以全高清播放。

再次感谢。

我的视频http://lmdesigns.x10host.com/Designtest.html

Answer 1

你必须将div设置为绝对，并从那里将它放置在容器div内部，其z-index比视频元素高。

.text-div {
    text-align: center;
    position: absolute;
    height: 97px;
    width: 80%;
    z-index: 3; 
    margin-left: 10%;
    margin-right: 10%;
    border: 3px solid #fff;
}

Answer 2

我最终将此代码用于整体视频设置

  <style>
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
    </style>
    <div class="videoWrapper">
<iframe src="//player.vimeo.com/video/99315264?    title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" width="500%" height="291%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

工作完美。现在继续阅读文本。非常有趣的项目我很感激你的意见。这很有趣，因为有很多不同的方法可以用代码完成。是一项试图找到正确方法的任务。

http://lmdesigns.x10host.com/Designtest.html

将文本叠加添加到我的Vimeo全屏幕背景 - 框架 -

2 个答案: