Youtube 视频作为网站背景 (tubular.js) 显示在我的其他组件之上，而不是在后面答案

【问题标题】：Youtube video as a site background (tubular.js) shows on top of my other components instead of in the backYoutube 视频作为网站背景 (tubular.js) 显示在我的其他组件之上，而不是在后面
【发布时间】：2015-05-10 09:41:28
【问题描述】：

我有一个网页，它使用tubular.js 脚本将youtube 视频显示为网站背景。 tubular page上有一句话：

首先，它假设您在 body 标签下有一个包装元素包含您所有的网站内容。它将包装器推广到 z-index：99，位置：relative。

然后，我写了一个简单的html/css代码：

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}
#logocontainer{
    position: absolute;
    top: 20%;
    margin-top: -35px;/* half of #content height*/
    left: 0;
    width: 100%;
    text-align:center;
}
#logo {
    margin-left: auto;
    margin-right: auto;
    height: 75px;
}


</style>
<body>
<div id="wrapper" class="clearfix">
    <div id="logocontainer">
        <div id="logo">
            <img src="img/logo.png"/>
        </div>
    </div>


</div> <!--wrapper-->   
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script> 
<script type="text/javascript">
            $(function() {
                var options = {
                    videoId : '9JXVUP1hyxA',
                    start : 1
                };
                $('body').tubular(options);
            });
        </script>
</body>
</html>

但是现在，当我运行它时 - 我只看到顶部没有我的徽标的 youtube 视频...我知道徽标在那里，因为当我注释掉 youtube 脚本时我可以看到它，但是我没有看到当视频出现时。我尝试将z-index:99 添加到#logo，但这并没有起到任何作用……你能帮我吗？

编辑：

正如 A. Wolff 在下面建议的那样，我添加到我的 css 中：

#wrapper{
    z-index:99;
    position: relative;
}

尽管如此 - 没有好的结果，视频仍然是最重要的..

【问题讨论】：

但是你有没有试过设置 z-index: 99 和 position: relative for #wrapper element？
是我还是作为背景的视频会相当烦人和分散注意力？
@EdHeal 我会说取决于视频，但无论如何不能在所有设备上工作，尤其是那些不允许视频自动播放模式的设备
@A.Wolff 我用你的建议更新了我的问题，不幸的是它没有用..
如你所见，它在这里工作：jsfiddle.net/a946gL5c

标签： javascript jquery css tubular

【解决方案1】：

我在他们自己的 Tubular 中看到他们使用这个小脚本...

$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia

});

只需添加它即可将所有内容都放在首位。使用此 Fiddle 中的代码作为示例。

【讨论】：

【解决方案2】：

您必须使用z-index 的位置：相对/绝对。此外，视频中的 z-index 必须小于块中的 z-index。

video {
    position: absolute;
    z-index: 1;
}

div {
    position: relative;
    z-index: 2;
}

【讨论】：

嘿，谢谢，检查我更新的问题，其中一位用户建议这样做，但不幸的是这对我没有帮助..
@randomuser1 - 请尝试将 z-index 设置为您的 div。