javascriptflashyoutubewmode

Script not allowing lightbox to cover embedded Youtube videos (wmode=transparent) but other script works

I had problems covering videos on Youtube itself but solved that with a design change (don't need to cover them any more).

So I have a script the user can run and it calls a javascript file to do other stuff on the current webpage. One thing it does is bring up a lightbox that covers the page. Of course it won't cover embedded Youtube videos and so I need to do a few changes. I did the necessary changes and it didn't work. I kept trying and trying and eventually made a page with just an embedded video and a .jpg (my script won't run if there are no images).

I looked to see what the Pinterest script added to the embedded video portion and while it was almost identical they did have an autoplay=0 in there so I added it just so I could see for myself that it is exactly the same. If I run the Pinterest script and close it, then run mine, mine works fine. If I run mine, then the Pinterest script, then mine again, mine works. So I believe this means I'm not adding anything that tells the page "Go ahead and put the video on top anyway."

My portion of the script that adds the wmode:

var players = document.getElementsByTagName('embed');
var len = players.length;
for(var i=0;i<len;i++){
    players[i].setAttribute('wmode', "transparent");
    players[i].src += "?autoplay=0&wmode=transparent";
}

Minimal page html:

<html>

<head>

</head>

 <body>

  <img src="img/title.jpg"> 

  <object width="425" height="350">

    <param name="movie" value="http://www.youtube.com/v/OOpkr8uNWpk"></param>

    <embed src="http://www.youtube.com/v/OOpkr8uNWpk" type="application/x-shockwave-flash"  width="425" height="350"></embed>

</object>

</body>

After Pinterest script:

<object width="425" height="350">
    <param name="movie" value="http://www.youtube.com/v/OOpkr8uNWpk">
    <embed src="http://www.youtube.com/v/OOpkr8uNWpk?autoplay=0&amp;wmode=transparent" type="application/x-shockwave-flash" width="425" height="350" wmode="transparent">
</object>

After mine:

<object width="425" height="350">
    <param name="movie" value="http://www.youtube.com/v/OOpkr8uNWpk">
    <embed src="http://www.youtube.com/v/OOpkr8uNWpk?autoplay=0&amp;wmode=transparent" type="application/x-shockwave-flash" width="425" height="350" wmode="transparent">
</object>

Since they are the same, I have no idea why it is not working.

Solution

  • The wmode may be visible in the html but has not taken effect - try cloning and replacing the html of the flash to force a reload (just to see if that's really the problem, I think changing the src forces a reload but I'm not sure)

    Also, can you paste the html/css of the lightbox or make a jsfiddle that can demostrate the problem?