CSS transform and YouTube embeds

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 h开发者_运维百科ere: 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?

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>

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.

Upvote for lawrenceshen.

The wmode=transparent worked.

var player;
        function onYouTubeIframeAPIReady() {
            console.log("onYouTubeIframeAPIReady");
            player = new YT.Player('gallery-youtube', {
                height: '594',
                width: '883',
                videoId: 'u1zgFlCw8Aw',
                playerVars: { "modestbranding":1, "wmode":"transparent" },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

For me, this problem only occurred in Firefox 4+ on Windows 7 and Windows 8. It didn't happen on any other browser or on OS X.

I spent hours stuck on this problem. I display YouTube videos in a modal which uses CSS3 translations to slide into view.

My solution was to remove the transform/transition classes once the modal has appeared.
Once I did that YouTube embeds appeared and no more empty black box.

More details: I use animate.css and add class="animated fadeInDownBig" to slide the modal down. Once it has reached its final destination, I remove those classes again.

It's a really strange problem which I hope Mozilla fix really soon.