Youtube iframe wmode issue

Iframe Problem Overview

Using javascript with jQuery, I am adding an iframe with a youtube url to display a video on a website however the embed code that gets loaded in the iframe from youtube doesnt have wmode="Opaque", therefore the modal boxes on the page are shown beneath the youtube video.

Any ideas how to solve the issue?

Iframe Solutions

Solution 1 - Iframe

Try adding ?wmode=opaque to the URL or &wmode=opaque if there already is a parameter.

If it doesn't work try this instead, &wmode=transparent which will work in IE browser as well.

Solution 2 - Iframe

Try adding ?wmode=transparent to the end of the URL. Worked for me.

Solution 3 - Iframe

If you are using the new asynchronous API, you will need to add the parameter like so:

<!-- YOUTUBE -->
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID
function onYouTubePlayerAPIReady() {
	console.log("onYouTubePlayerAPIReady" + initialVideo);
	player = new YT.Player('player', {
	  height: '381',
	  width: '681',
	  wmode: 'transparent', // SECRET SAUCE HERE
	  videoId: initialVideo,	  
	   playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
	  events: {
		'onReady': onPlayerReady,
		'onStateChange': onPlayerStateChange
	  }
	});
}

This is based on the google documentation and example here: http://code.google.com/apis/youtube/iframe_api_reference.html

Solution 4 - Iframe

Adding ?wmode=opaque to the URL seems to solve this problem for me, although I have not tested it in IE yet.

For those of you having troubles with the previously proposed solution, note that an inital ampersand will only work if you are already supplying other arguments to the URL. The first argument must have an initial question mark: http://www.example.com?first=foo&second=bar

Solution 5 - Iframe

Add &wmode=transparent to the url and you're done, tested.

I use that technique in my own wordpress plugin YouTube shortcode

Check its source code if you encounter any issue.

Solution 6 - Iframe

Just a tip!--make sure you up the z-index on the element you want to be over the embedded video. I added the wmode querystring, and it still didn't work...until I upped the z-index of the other element. :)

Solution 7 - Iframe

&wmode=opaque didn't work for me (chrome 10) but &wmode=transparent cleared the issue right up.

Solution 8 - Iframe

I know this is an old question, but it still comes up in the top searches for this issue so I'm adding a new answer to help those looking for one for IE:

Adding &wmode=opaque to the end of the URL does NOT work in IE 10...

However, adding ?wmode=opaque does the trick!

Found this solution here: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

Solution 9 - Iframe

recently I saw that sometimes the flash player doesn't recognize &wmode=opaque, istead you should pass &WMode=opaque too (notice the uppercase).

Content Type	Original Author	Original Content on Stackoverflow
Question	snakeyyy	View Question on Stackoverflow
Solution 1 - Iframe	Shabith	View Answer on Stackoverflow
Solution 2 - Iframe	Casper	View Answer on Stackoverflow
Solution 3 - Iframe	Plastic Sturgeon	View Answer on Stackoverflow
Solution 4 - Iframe	Markus Amalthea Magnuson	View Answer on Stackoverflow
Solution 5 - Iframe	Túbal Martín	View Answer on Stackoverflow
Solution 6 - Iframe	Tyson Phalp	View Answer on Stackoverflow
Solution 7 - Iframe	imjared	View Answer on Stackoverflow
Solution 8 - Iframe	Amber June	View Answer on Stackoverflow
Solution 9 - Iframe	Nereo Costacurta	View Answer on Stackoverflow