Is This Possible? Overlapping a YouTube Video with an Image?

Hi all,

First post. I'm designing a website for a band, and they would like a banner image to overlap a YouTube video, sort of like a frame, but one that overlaps the video as well.

Quick image explanation:



Is this possible using the z-index property? If so, will the video still retain functionality (ie, play, pause, etc.)?

 

Why do they want an image to overlap the video? Is it so the song plays?

 

ys, its possible but not with the z-index property......bcoz with z-index your image won't be able to overlap video.

To make it possible, you need to put your video in a relative div and in that div you need to put a absolute position div. And in this absolute positioned div you can add your desired image.
And regarding functionality, it will not effect video functionality.....

 

To add to this, the flash object (the youtube video) needs to have wmode="transparent"

 

In my trick, flash tranparency have no role.....

 

no dude you would have to use javascript

 

I've done this hundreds of times in the last few years.

Actually he's correct. He's referring to the flash placement HTML (or js if you're using swfobject/RunActiveContent)--not the actutal FLA/SWF/ActionScript. Your solution would work fine with native browser elements, but since flash is an embed/object (foreign not native to browsers) you have to tell Flash not to have an infinite "z-index" (not a z-index really but z-index behavior) in the placement. This is also browser specific--and the wmode property would not be needed in every browser.

To demonstrate this, use Firefox and position a colored div over where a flash placement is--with and without the wmode property in the object/embed.

And no, you don't have to use any Javascript to accomplish this.

 

anyway its pretty annoying and im pretty sure the result will be too