STARIKOVS

In this article you’ll find how to force YouTube video showing under your html elements.

By default, YouTube video is showed over any html element. In my case, the problem refers to Dropdown Menu and Lightbox. For example, when Lightbox is appearing YouTube video overlaps it ignoring z-index. In general, you may run into this problem with any html element you want to position over YouTube video.

At the moment, YouTube video is added to html page via iframe. Inside the iframe YouTube creates all the stuff it needs to show the video. In the depth of iframe there’s Flash Player, by default. If HTML 5 is used to show the video there isn’t any Flash in iframe and there isn’t any problem with overlay. Flash is inserted to the browser using or

helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html

After reading the docs you can find an interesting attribute wmode and an interesting possible value of this attribute – transparent:

transparent – The SWF content is layered together with other HTML elements on the page.

That’s what we need! So, SWF content is Flash that we want to behave like other html elements.

Here is a schematic html code YouTube uses to show the video deep inside iframe:

1

  type="application/x-shockwave-flash" src="...">

Html should be like following to fix the problem with overlay:

1

  ="transparent" type="application/x-shockwave-flash" src="...">

Fortunately, it’s possible to toggle wmode attribute via iframe source parameters when inserting YouTube video to html:

1
2
3

  <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/NeXMxuNNlE8?wmode=transparent" 
    frameborder="0" allowfullscreen></iframe>?

Take notice at src attribute and wmode parameter:

src=”http://www.youtube.com/embed/NeXMxuNNlE8?wmode=transparent“

Now, using this approach it’s possible to position Menu, Lightbox or any other html element over YouTube video or other flash/swf movie.

This problem appears not in all browsers, mostly in old browsers like IE, old versions of FireFox or WebKit. The test example is here:

http://jsfiddle.net/buhvf/1/

One Response to “How to position html elements over YouTube video”