Youtube видео в качестве фона сайта (tubular.js) показывает поверх других моих компонентов, а не сзади

У меня есть веб-страница, которая использует скрипт tubular.js для показа видео с YouTube в качестве фона сайта. На трубчатой ​​странице есть предложение:

Во-первых, предполагается, что у вас есть один элемент-обертка под тегом body, который охватывает весь контент вашего сайта. Это продвигает эту обертку к z-index: 99 и позиции: относительная.

Итак, после этого я написал простой код 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 но это не творило никакой магии... Можете ли вы помочь мне с этим?

РЕДАКТИРОВАТЬ:

Как предложил А. Вольф ниже, я добавил к своему CSS:

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

все еще, хотя - нет хороших результатов, видео все еще на вершине..

Источник

2 ответа

Я вижу, в своих собственных Tubular они используют этот маленький сценарий...

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

});

Просто добавив это держит все на вершине. Используйте код в этой скрипке в качестве примера.

Источник

Вы должны использовать z-index с позицией: относительный / абсолютный. Также ваш z-index в видео должен быть меньше, чем в ваших блоках.

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

div {
    position: relative;
    z-index: 2;
}
Источник
Другие вопросы по тегам