iFrame Issue div

[scarcella]

Hey Guys, i am having trouble placing this image over a youtube video, I want the .youtube_hat to be displayed over the youtube video in the top corner. So could anyone please help me!!

The HTML

<div class="youtube_area">
       	<div class="youtube_hat"></div>
        <div class="youtube">
            	<iframe title="YouTube video player" width="450" height="258" src="http://www.youtube.com/embed/B-1Xqnx-KCw?rel=0" frameborder="0" allowfullscreen></iframe>
        </div>
</div>

The CSS

.youtube_hat {
	position: absolute;
	margin: -75px 0 0 -72px;
	width: 210px; height: 157px;
	background: url(../img/youtube_hat.png) no-repeat top left;	
	z-index: 5;
}
.youtube_area {
	position: absolute;
	top: 227px;	
	left: 592px;
}
.youtube {
	position: absolute;
	width: 450px; height: 258px;
	z-index: 1;
}

Thank you guys, if you can help
Marais

[RoyalElite96]

Use <object></object> and include <param name="wmode" value="opaque" />.

Hope that helps!

[scarcella]

Still don't work,

HTML

<!-- Begin Youtube Area -->
    	<div class="youtube_area">
        	<div class="youtube_hat"></div>
        	<div class="youtube">
            	<object data="http://www.youtube.com/embed/B-1Xqnx-KCw?rel=0" width="450" height="258"><param name="wmode" value="opaque" /></object>
            </div>
        </div>
        <!-- End Youtube Area -->

CSS

.youtube_hat {
	position: absolute;
	margin: -75px 0 0 -72px;
	width: 210px; height: 157px;
	background: url(../img/youtube_hat.png) no-repeat top left;	
	z-index: 100;
}
.youtube_area {
	position: absolute;
	top: 227px;	
	left: 592px;
}
.youtube {
	position: absolute;
	width: 450px; height: 258px;
	z-index: 1;
}

Thanks, For you help
Marais

[RoyalElite96]

Something like this maybe? The problem with flash objects is, that the browser reads them above all other elements. Using wmode opaque you can tell the browser to read it like regular elements. For example:

<object width="800" height="20">
<param name="movie" value="http://www.youtube.com/object.swf" />
<param name="wmode" value="opaque" />
<embed src="http://www.youtube.com/object.swf" width="800" height="20" wmode="opaque">
</embed></object>

Important: Don't use the same link as for the iFrame. That is an HTML file and it has to be an swf.

[scarcella]

Thank you soo much, this worked... Only thing is that it is the old youtube player.. But what the heck.

Thanks,
Marais