youtube iframe 上的 jQuery 模态对话框答案

【问题标题】：jQuery modal dialog over youtube iframeyoutube iframe 上的 jQuery 模态对话框
【发布时间】：2012-02-25 07:58:23
【问题描述】：

我知道有关让 jQuery 对话框出现在 youtube 视频前面的修复程序，但我正在使用他们新的 IFrame 嵌入方法：

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;

如何在视频顶部显示对话框？

【问题讨论】：

看看这里stackoverflow.com/questions/3820325/…

标签： jquery iframe youtube

【解决方案1】：

如果您使用的是新的 iframe 代码，只需将“wmode=transparent”作为查询字符串段添加到 url 字符串。

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

【讨论】：

【解决方案2】：

我在脚本的“playerVars”中添加了“wmode”，请参见下面的示例代码...

<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";
    }
}

【讨论】：

【解决方案3】：

我知道这篇文章很老了。但是，现在 IE 11 中仍然存在问题。我发现解决这个荒谬问题的最干净和最可靠的方法是在 jQuery UI 对话框的 open:function( )，然后在对话框的 close:function() 中再次 .show() 播放器 div。快乐的日子：D

【讨论】：