0

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

首先，它假设您在 body 标签下有一个包装器元素，它包含您的所有网站内容。它将包装器提升为 z-index: 99 和 position: 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;
}

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

4

2 回答 2

2

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

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

});

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

在此处输入图像描述

于 2015-05-10T10:41:27.970 回答
1

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

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

div {
    position: relative;
    z-index: 2;
}
于 2015-05-10T09:50:06.320 回答