How can I float a png over an embeded youtube clip

I'm designing a webpage, and the concept is a television set that plays video from Youtube. The television is a png inside of a div, with the screen transparent so you can see what's behind it. I want the put a Youtube in the screen, but the Youtube video is overlapping onto the div. If I do this with an image or text, it works fine.

The trouble is that the 'screen' is not a square: the picture has a slight fisheye effect to it, so none of the edges are straight, and the corners are rounded. I don't mind some of the iframe being hidden behind the png of the television set -- that's why I'm trying to do! -- but the iframe stays on top.

In short, how can I hide some of an iframe behind a png that has a large transpa开发者_StackOverflowrent section in the middle?

EDIT

Here's a live link. Hope yall like the JAMS :)

http://jkdjkdjkd.zxq.net/redstarartists/index.html

If I got that right you want to be able to put stuff "above" your "screen" which is basically an embedded YouTube video? To be honest the only way that I can think of that could actually work with YouTube videos is to use the old iframe YouTube embedding format and add a wmode parameter with value opaque.

<param name="wmode" value="opaque" />

That parameter will change the stacking order of embedded flash files and enable you to put things "on" the screen with simple positioning and z-index attributes.

EDIT: I told you to add the opaque value for the wmode parameter yet I forgot that some browsers make use of the embed tag :) Just change your YT embedding part to look like this (you'll notice the wmode parameter as part of embed)

<object width="705" height="559">
    <param name="movie" value="http://www.youtube.com/v/qr-OM5bdlto?version=3&amp;hl=en_US">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="opaque">
    <embed src="http://www.youtube.com/v/qr-OM5bdlto?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="705" height="559" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
</object>

I can't guarantee it will work†, but you basically want to use two absolutely positioned divs within a relatively positioned one:

<div class="move_holder">
    <div class="tv_frame"></div>
    <div class="youtube_video"><!-- place video here --></div>
</div>

CSS:

.movie_holder { position: relative; }
.movie_holder div { position: absolute; top: 0; left: 0; width: 500px; height: 350px; }
.tv_frame { background: transparent url(images/tv_frame.png) no-repeat 0 0;

This should put the .tv_frame above the .youtube_video div. Adjust width and height as necessary.

† I can't guarantee it because the flash player is not truly an HTML element, so it might get rendered on top of the overall page. You'll need to check IE especially!

My solution to this issue was to open the youtube player in a iframe instead of a object:

Then I appended wmode=opaque to the URL as a get parameter.

Answer with 52+ score to the issue here