Блог

Главная - Вопросы по программированию - Как я могу абсолютно позиционировать div, который содержит видео YouTube с тегом на моем веб-сайте?

Как я могу абсолютно позиционировать div, который содержит видео YouTube с тегом на моем веб-сайте?

#html #css #youtube #position #absolute

#HTML #css #YouTube #позиционирование #абсолютный

Вопрос:

я хотел бы импортировать видео YouTube на свой веб-сайт.

Я использую объектный код, как вы увидите позже. У меня есть два divs. Каждый из них позиционируется абсолютно (позиция: абсолютная).

Моя проблема в том, что div2, который содержит кодировку youtube «», не «подчиняется» атрибуту z-index.

Я бы хотел, чтобы div2, который содержит видео с YouTube *, перекрывался div1 *, который имеет z-index: 3 больше, чем z-index (div2): 1.

Мой код выглядит следующим образом:

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

.div1 {
    width:540px;
    height:400px;
        border:3px solid red;
    position:absolute;
    z-index:3;
}

.div2 {
    width:540px;
    height:350px;
    border:3px solid blue;
    position:absolute;
    z-index:1;
}

</style>

</head>

<body>

<div class="div2">

    <object width="540" height="415" >
     <param name="movie"
         value="http://www.youtube.com/v/NWHfY_lvKIQ?version=3amp;autohide=1amp;showinfo=0"></param>
    <param name="allowScriptAccess" value="always"></param>
    <embed src="http://www.youtube.com/v/NWHfY_lvKIQ?version=3amp;autohide=1amp;showinfo=0"
         type="application/x-shockwave-flash"
         allowscriptaccess="always"
         width="540" height="415"></embed>
</object>

</div>
<div class="div1">
</div>


</body>
</html>

Если вы запустите пример, вы увидите, что div2 перекрывает div1, а этого не должно быть.
Я думаю, что проблема в коде

Как я могу решить эту проблему?Вы когда-нибудь сталкивались с этой проблемой снова?

Заранее спасибо

Ответ №1:

Вам нужно установить wmode на прозрачный, чтобы это сработало. Проверьте это :

http://jsfiddle.net/XjyHk/

Комментарии:

1. Ну, как я вижу, теперь в моей программе все в порядке! Спасибо!

Метки: ,