136

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

任何想法如何解决这个问题？

4

9 回答 9

239

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

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

于 2010-11-18T03:06:21.790 回答
81

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

于 2010-12-06T14:00:40.747 回答
18

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

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

于 2012-02-21T23:10:19.317 回答
8

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

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

于 2011-02-09T00:45:19.773 回答
3

添加&amp;wmode=transparent到 url，你就完成了，经过测试。

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

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

于 2011-02-28T11:49:32.443 回答
1

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

于 2012-10-17T09:03:20.427 回答
0

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

于 2011-03-29T17:25:41.480 回答
0

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

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

但是，添加?wmode=opaque可以解决问题！

在这里找到了这个解决方案：http: //alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

于 2013-08-16T20:52:31.950 回答
0

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

于 2015-10-12T17:17:34.730 回答