i would like to import a youtube video in my website.
I’m using the object code as you’ll see later on.
I have two divs. Each of them is positioned absolutely (position:absolute).
My problem is that the div2 which containes the youtube coding “”
doesn’t “obey” to z-index attribute.
I would like the div2 which contains the youtube video *to be overlapped by div1* which has a z-index: 3 greater than z-index(div2):1.
My code is as follows:
<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=3&autohide=1&showinfo=0"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="http://www.youtube.com/v/NWHfY_lvKIQ?version=3&autohide=1&showinfo=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="540" height="415"></embed>
</object>
</div>
<div class="div1">
</div>
</body>
</html>
If you run the example, you ‘ll see that div2 overlaps div1 and it shouldn’t.
I think that the problem is with the code
How can i solve this problem?Have you ever faced this problem again?
Thanks, in advance
You need to set the wmode to transparent so this will work. Check this :
http://jsfiddle.net/XjyHk/