1

I'm aware of the fix that was posted on getting jQuery dialog to appear in front of youtube videos, but I'm using their new IFrame embedding method:

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

How can I get the dialog on top of the video?

blueintegral
  • 1,253
  • 5
  • 20
  • 31

3 Answers3

5

If you are using the new iframe code, just add the "wmode=transparent" to the url string as a querystring segment.

<iframe width="403" height="235" src="http://www.youtube.com/embed/(video_code)?wmode=transparent" frameborder="0" allowfullscreen></iframe>
W3bGuy
  • 735
  • 7
  • 20
1

I added 'wmode' to the 'playerVars' to the script, see sample code below...

<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'FM-Vt87W3_A',
    playerVars: {
        'autoplay': '0',
        'wmode': 'transparent',
        'showinfo': '0'},
    events: {
        'onStateChange': onPlayerStateChange}
    });
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        window.location="index.php";
    }
}

andyOverstood
  • 9
  • 1
0

I know this post is quite old. However, the problem still exists now in IE 11. The cleanest and most reliable way I've found to solve this ridiculous issue, is to call .hide() on the div containing the youtube player in the jQuery UI dialog's open:function(), and then .show() the player div again in the dialog's close:function(). Happy days :D

Awerealis
  • 602
  • 6
  • 9