Youtube iframe wmode issue

Question

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?

Is this still an issue? I used this solution before but cannot reproduce the original issue in the latest Chrome/Firefox/IE. — marcovtwout, Nov 18 '13 at 17:03

Shabith · Accepted Answer · 2015-08-23T07:23:58.403

238

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.

edited Aug 23 '15 at 07:23

answered Nov 18 '10 at 03:06

Shabith

2,945
2
20
19

1

nice! works on firefox & chrome but for some reason doesnt work on IE... any ideas ? – danfromisrael Nov 24 '10 at 13:10
31

try using &wmode=transparent instead – Shabith Nov 25 '10 at 07:23
Thank you. This was exactly what I needed. Was unsuccessfully trying to use z-index workarounds. – Feb 14 '11 at 17:41
I also found that adding helped me – Kieran May 25 '11 at 03:16
29

The "&wmode=xxxx" setting assumes that you're already passing parameters in the URL. I wasn't in my case, so I instead need to add "?wmode=xxxx" to the URL. – Matt Huggins May 27 '11 at 20:29
6

[Differences between `opaque` and `transparent`](http://stackoverflow.com/questions/886864/differences-between-using-wmode-transparent-opaque-or-window-for-an-embed). `opaque` is supposed to be more performant. – donut Sep 14 '11 at 17:36
3

Shabith - "wmode=Opaque" should be "wmode=opaque" (lowercase 'o') – John Mar 19 '12 at 13:39
@Shabith This actually fixed an issue for me in Internet Explorer. Adding "?wmode=transparent" to the URL was fixing the issue in everything except all versions of IE. But changing the attribute to your suggested example "&wmode=transparent" fixed the issue in every browser, including all versions of IE. So props to you - your comment should be included in the answer. Because it's spot on and exactly what fixed the issue. Thank you! – James Aug 20 '15 at 10:58

score 81 · Answer 2 · edited Jun 16 '11 at 03:30

81

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

edited Jun 16 '11 at 03:30

Luke

1,682
18
31

answered Dec 06 '10 at 14:00

Casper

811
5
3

'Transparent' should be the preferred option in my opinion. – Foxinni Oct 17 '12 at 09:19

Plastic Sturgeon · Answer 3 · 2013-10-17T19:11:12.770

18

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

edited Oct 17 '13 at 19:11

answered Feb 21 '12 at 23:10

Plastic Sturgeon

12,167
4
30
46

7

Note that this ALSO needs wmode in playerVars. When it's just under YT.Player, it will only work for the HTML5 player. Adding wmode to playerVars also sends that parameter to the Flash object, which has its own z-order problem. See here: https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/OQRG5rTKBFQ I'll edit your answer accordingly. – Dylan McCall Mar 21 '12 at 04:18
1

I tried this and it did not work. I also did not find any reference to wmode in YouTude documentation. – sboisse Oct 16 '13 at 20:37
The link changed since I first posted, as did the method for setting the wmode. You can set any flash parameter now or youtube player parameter through playerVars. I have updated the above example. – Plastic Sturgeon Oct 17 '13 at 19:10
Loading a entire API just to change a value that can be easily changed in the URL is a total overkill. Don't use this. – fregante Nov 16 '13 at 16:07
There are some of us who work with the chromeless player and already use the JS API for controlling the UI. For us, this solution totally rocks! Thanks – maxijb Jan 02 '14 at 15:26

score 8 · Answer 4 · answered Feb 09 '11 at 00:45

8

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

answered Feb 09 '11 at 00:45

Markus Amalthea Magnuson

7,701
4
38
49

I was initially getting a black rectangle regardless of the video I was trying to show.. turned out the test machine didn't have flash installed and the dialogue for installing flash was offset too much! – Zeb Sep 16 '11 at 12:44

score 3 · Answer 5 · answered Feb 28 '11 at 11:49

3

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.

answered Feb 28 '11 at 11:49

Túbal Martín

31
1

Adding &wmode=transparent after the you tube URL Solved the problem across all browsers. Thanks for Mr Tubal, Good job :) – Mar 13 '11 at 14:13

score 1 · Answer 6 · answered Oct 17 '12 at 09:03

1

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. :)

answered Oct 17 '12 at 09:03

Tyson Phalp

2,477
2
18
12

Amber June · Answer 7 · 2013-08-16T21:06:47.947

0

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

edited Aug 16 '13 at 21:06

answered Aug 16 '13 at 20:52

Amber June

376
3
10

`&` and `?` are both correct depending on which order they are used and which other settings are included in the URL. Obviously `?` is used if this is the first (or only) setting, `&` otherwise. – Alex Sep 11 '13 at 13:50
Yes, but IE has special needs. Just try it and see which works in IE 10 and which doesn't. I haven't tried this in IE 11 yet. – Amber June Dec 19 '13 at 21:45

score 0 · Answer 8 · answered Oct 12 '15 at 17:17

0

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

answered Oct 12 '15 at 17:17

Nereo Costacurta

5,183
4
17
25

score 0 · Answer 9 · answered Mar 29 '11 at 17:25

0

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

answered Mar 29 '11 at 17:25

imjared

15,060
2
42
66

Youtube iframe wmode issue

9 Answers9

Linked

Related