CSS transform and YouTube embeds

Question

Using css-transforms on a YouTube embed renders the video black in at least Safari 5 and Firefox 4. Chrome 11 handles it just fine.

I've made an example here: http://jsfiddle.net/oskarrough/4vRzd/4/

I need the css-transform in order to do some fancy layout positioning. Is there any way, css or js, to hack it to display the video?

Answer 1

I am tackling the same problem right now. I am not doing any fancy css transformations, just scaling.

Although not working perfectly, I got the video to display by using the wmode=transparent option.

i.e.

<iframe width='640' height='480' frameborder='0' src='http://www.youtube.com/embed/YOUTUBE_VIDEO_ID?wmode=transparent' type='text/html' class='youtube-player'></iframe>

Answer 2

Are you sure you can't use this instead:

iframe {
    position: relative;
    top: 100px
}

http://jsfiddle.net/4vRzd/5/

Or margin-top: 100px, or a negative margin on some other element?

Someone had to post this, because you didn't mention that they aren't viable options.