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

User · Answer

Add  amp amp 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

User · Answer

If you are using the new asynchronous API  you will need to add the parameter like so    lt  -- YOUTUBE -- gt     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  lt iframe gt   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

User · Answer

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  amp 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

User · Answer

recently I saw that sometimes the flash player doesn t recognize  amp wmode opaque  istead you should pass  amp WMode opaque too  notice the uppercase

User · Answer

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

User · Answer

amp wmode opaque didn t work for me  chrome 10  but  amp amp wmode transparent cleared the issue right up

User · Answer

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 amp second bar

User · Answer

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

User · Answer

Try adding  wmode opaque to the URL or  amp wmode opaque if there already is a parameter   If it doesn t work try this instead   amp amp wmode transparent which will work in IE browser as well

[iframe] Youtube iframe wmode issue

Examples related to iframe

Examples related to youtube

Examples related to wmode