Youtube iframe wmode 问题答案

【问题标题】：Youtube iframe wmode issueYoutube iframe wmode 问题
【发布时间】：2011-05-02 08:21:43
【问题描述】：

将 javascript 与 jQuery 结合使用，我添加了一个带有 youtube url 的 iframe 以在网站上显示视频，但是从 youtube 加载到 iframe 中的嵌入代码没有 wmode="Opaque"，因此在页面显示在 youtube 视频下方。

有什么办法解决这个问题吗？

【问题讨论】：

这仍然是一个问题吗？我之前使用过这个解决方案，但无法在最新的 Chrome/Firefox/IE 中重现原始问题。

标签： iframe youtube wmode

【解决方案1】：

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

如果它不起作用，试试这个，&amp;wmode=transparent 也可以在 IE 浏览器中工作。

【讨论】：

不错！适用于 Firefox 和 chrome，但由于某种原因不适用于 IE……有什么想法吗？
尝试改用 &wmode=transparent
“&wmode=xxxx”设置假定您已经在 URL 中传递参数。我的情况不是这样，所以我需要在 URL 中添加“?wmode=xxxx”。
Differences between opaque and transparent。 opaque 应该更高效。
Shabith - “wmode=Opaque”应该是“wmode=opaque”（小写“o”）

【解决方案2】：

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

【讨论】：

“透明”在我看来应该是首选。

【解决方案3】：

如果您使用的是新的异步 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

【讨论】：

请注意，这在 playerVars 中也需要 wmode。当它在 YT.Player 下时，它只适用于 HTML5 播放器。将 wmode 添加到 playerVars 还会将该参数发送到 Flash 对象，该对象有其自身的 z 顺序问题。见这里：groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/…我会相应地编辑你的答案。
我试过了，但没有用。我也没有在 YouTude 文档中找到任何对 wmode 的引用。
自从我第一次发布以来，链接发生了变化，设置 wmode 的方法也发生了变化。您现在可以设置任何 flash 参数或通过 playerVars 设置 youtube 播放器参数。我已经更新了上面的例子。
加载整个 API 只是为了更改 URL 中可以轻松更改的值，这完全是矫枉过正。不要使用这个。
我们中的一些人使用 chromeless 播放器并且已经使用 JS API 来控制 UI。对我们来说，这个解决方案完全震撼！谢谢

【解决方案4】：

在 URL 中添加?wmode=opaque 似乎为我解决了这个问题，虽然我还没有在 IE 中测试过。

对于那些对之前提出的解决方案有疑问的人，请注意，只有在您已经为 URL 提供了其他参数的情况下，初始 & 符号才有效。第一个参数必须有一个初始问号：http://www.example.com?first=foo&second=bar

【讨论】：

我最初得到一个黑色矩形，不管我试图显示的视频是什么。结果测试机器没有安装闪光灯，安装闪光灯的对话框偏移太多！跨度>

【解决方案5】：

将&amp;wmode=transparent 添加到网址中，您就完成了，经过测试。

我在自己的 wordpress 插件中使用了这种技术YouTube shortcode

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

【讨论】：

在you tube URL后添加&wmode=transparent 解决了所有浏览器的问题。谢谢 Tubal 先生，干得好 :)

【解决方案6】：

只是一个提示！-- 确保在嵌入视频上方的元素上设置 z-index。我添加了 wmode 查询字符串，但它仍然不起作用……直到我提高了另一个元素的 z-index。 :)

【讨论】：

【解决方案7】：

&wmode=opaque 对我不起作用（chrome 10），但&amp;wmode=transparent 解决了这个问题。

【讨论】：

【解决方案8】：

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

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

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

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

【讨论】：

& 和 ? 都是正确的，具体取决于它们使用的顺序以及 URL 中包含的其他设置。显然，如果这是第一个（或唯一一个）设置，则使用?，否则使用&。
可以，但 IE 有特殊需求。只需尝试一下，看看哪些在 IE 10 中有效，哪些无效。我还没有在 IE 11 中尝试过。

【解决方案9】：

最近我看到有时 Flash 播放器无法识别&wmode=opaque，而是你应该也传递&WMode=opaque（注意大写）。

【讨论】：