将文本覆盖添加到我的 Vimeo 全屏背景 -iframe-

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