YouTube iframe wmode问题

结合使用JavaScript和jQuery，我在YouTube网站上添加了带有youtube网址的iframe，以在网站上显示视频，但是从youtube加载到iframe中的嵌入代码没有wmode =“ Opaque”，因此在页面上显示了模式框在youtube视频下方

任何想法如何解决问题？

尝试添加?wmode=opaque到URL或&wmode=opaque如果已有参数。

如果它不起作用，请尝试使用它，&wmode=transparent它也将在IE浏览器中起作用。

尝试添加?wmode=transparent到URL的末尾。为我工作。

如果您正在使用新的异步API，则需要添加参数，如下所示：

<!-- 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
      }
    });
}

这基于google文档和此处的示例：http : //code.google.com/apis/youtube/iframe_api_reference.html

?wmode=opaque尽管我尚未在IE中对其进行测试，但添加到URL似乎可以解决此问题。

对于那些对先前提出的解决方案感到麻烦的人，请注意，仅在您已经向URL提供其他参数的情况下，首字母“＆”号才起作用。第一个参数必须带有一个初始问号：http://www.example.com?first=foo&second=bar

添加&wmode=transparent到URL，就可以完成测试。

我在自己的wordpress插件YouTube短代码中使用了该技术

如果遇到任何问题，请检查其源代码。

提示！-确保您要在嵌入视频上方的元素上设置z-index。我添加了wmode查询字符串，但仍然无法正常工作...直到我调高了另一个元素的z-index。:)

&wmode=opaque不适用于我（chrome 10），但可以立即解决&wmode=transparent此问题。

我知道这是一个老问题，但是仍然会在该问题的热门搜索中出现，因此我添加了一个新答案，以帮助那些为IE寻找问题的人：

添加&wmode=opaque到URL的末尾在IE 10中不起作用...

但是，添加?wmode=opaque就可以了！

在此处找到此解决方案：http : //alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

最近，我看到有时Flash Player无法识别&wmode=opaque，相反，您也应该通过&WMode=opaque（注意大写）。