YouTube iFrame Embed Video Showing Over Menu Options

/in /by

During building Chameleon’s website we discovered something we had not seen before.

Our drop menu system which works great (in out view) breaks when at the top of the page we have a YouTube iFrame Embed Video.

The YouTube Video preview shows over the menu so any long menus we have are basically broken. This had to be fixed and now we have a solution we thought we would share this with you.

Lets start at the basics, a YouTube iFrame Video is an element on your webpage and ordering elements on page is like layers in photoshop. For a menu to be behind the YouTube iFrame Video the only thing it can be is the menu is lower than what YouTube is assigning for the video player itself.

What we decided to do was to for our menu was to overide what YouTube are doing by adding transparency to the Video player.

To explain this take a look at this code:-

<iframe width=”420″ height=”315″ src=”http://www.youtube.com/embed/vCC65UFiDUs” frameborder=”0″ allowfullscreen></iframe>

Search Engine Optimisation SEO Company

This is straight from YouTube after clicking the SHARE and then Embed function.

Now to add transparency to the Video player we need to add a little extra coding “?wmode=transparent” and this is added in the SRC section so the fixed coding would be:-

<iframe src=”http://www.youtube.com/embed/vCC65UFiDUs?wmode=transparent” frameborder=”0″ width=”420″ height=”315″></iframe>

Search Engine Optimisation SEO Company

This works great for us. Remember to add this coding with care.

If you have any strange problems and need help then simply get in touch with us and web developer will help.