954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

iFrame Issue div

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

marases
Junior Poster in Training
87 posts since Sep 2010
Reputation Points: 21
Solved Threads: 7
 

Use and include .

Hope that helps!

RoyalElite96
Light Poster
44 posts since Dec 2010
Reputation Points: 16
Solved Threads: 2
 

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

marases
Junior Poster in Training
87 posts since Sep 2010
Reputation Points: 21
Solved Threads: 7
 

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:


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

RoyalElite96
Light Poster
44 posts since Dec 2010
Reputation Points: 16
Solved Threads: 2
 

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

Thanks,
Marais

marases
Junior Poster in Training
87 posts since Sep 2010
Reputation Points: 21
Solved Threads: 7
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: