0

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

Edited by scarcella: n/a

2
Contributors
4
Replies
5
Views
6 Years
Discussion Span
Last Post by scarcella
0

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

Edited by scarcella: n/a

0

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.

0

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

Thanks,
Marais

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.