2

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 transparent section in the middle?

EDIT

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

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

James
  • 151
  • 1
  • 8

3 Answers3

1

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>
  • Tough, that's not doing it either. – James Jul 31 '11 at 02:04
  • 1
    Could you at least provide some code or a live demo since its pretty hard to take everything into account without any code. –  Jul 31 '11 at 02:07
  • Looks great! Thanks. But now, I can't reach the player controls because they're behind that png :) – James Jul 31 '11 at 03:02
  • Well that's the catch with overlaying. Although its transparent the PNG is actually on top of your video and I am not quite sure what you can do to change that (most probably not much). But aren't you going to use the TV controls to play / stop the video? That's perfectly achievable with JavaScript. –  Jul 31 '11 at 03:05
  • I mean, I suppose I could cut the image into four parts. It just seems like a pain, y'know? You're right about dem controls. Thanks for the advice... good stuff. – James Jul 31 '11 at 07:09
  • How about you put an additional layer above this overlay of yours and trigger the video start / stop on click with JavaScript? :) It might not follow the trigger area in the middle 100% but it would cover most of it and users will still think that they are starting / stopping the video directly. –  Jul 31 '11 at 08:39
0

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!

OverZealous
  • 39,252
  • 15
  • 98
  • 100
0

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

Community
  • 1
  • 1
anataliocs
  • 10,427
  • 6
  • 56
  • 72