I recently received a bug report on one of the website I've been involved in developing. They have a fixed header and YouTube embeds were riding over the top of the head instead of tucking underneath like the rest of the content. The user's browser was Internet Explorer 10.

Firing up my Windows 7 VM to test this out, I couldn't replicate it on Internet Explorer versions 9 to 11, but the user was clearly experiencing this. My Internet Explorer 8 wouldn't show You Tube embeds at all. Flash was required. Installing Flash allowed the problem to appear. Flash was ignoring the z-index.

I had no control over how the YouTube embeds were added to the page, so a little sprinkling of JavaScript was required to fix the situation:


    $('iframe[src^="//www.youtube.com/embed"]').each(function(){

        var url = $(this).attr("src");

        var separator = (url.indexOf('?') > 0) ? '&' : '?';

        $(this).attr('src', url + separator + 'wmode=transparent');

    });

This adds wmode=transparent to the iframe URL which in turn sets the correct parameters in the Flash embed code.

If you use a modern non-Microsoft browser, likely you won't be affected. If you don't have Flash installed, this will definitely not affect you.

Further reading