logo标签列表

Youtube嵌入式框架wmode问题

iframeyoutubewmode
136
使用jQuery和JavaScript，我正在添加一个包含YouTube URL的iframe以在网站上显示视频，但是从YouTube加载到iframe中的嵌入代码没有wmode ="Opaque"属性，因此页面上的模态框被显示在YouTube视频下方。有什么解决方法吗？
这个问题还存在吗？我之前使用过这个解决方案，但是在最新的Chrome/Firefox/IE中无法再现原始问题。 - marcovtwout
9个回答
239

尝试将?wmode=opaque添加到URL中，如果已经有参数则使用&wmode=opaque。

如果不起作用，请改为使用&wmode=transparent，这将在IE浏览器中也可以使用。

1
不错！在Firefox和Chrome上可以运行，但是在IE上却无法工作...有什么想法吗？ - danfromisrael
31
请尝试使用“&wmode=transparent”代替。 - Shabith
29
"&wmode=xxxx"设置假定您已经在URL中传递了参数。但在我的情况下，我没有这样做，所以我需要将“?wmode=xxxx”添加到URL中，来达到同样的效果。 - Matt Huggins
6
opaque 和 transparent 的区别：opaque 通常比较高效。 - donut
3
Shabith - "wmode=Opaque" 应该改为 "wmode=opaque" （小写的 'o'）。 - John
显示剩余3条评论
81

尝试在URL的末尾添加?wmode=transparent。这对我有用。

在我看来，“透明”应该是首选选项。 - Foxinni
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
      }
    });
}

以下内容基于Google文档和示例：http://code.google.com/apis/youtube/iframe_api_reference.html

7
请注意，这也需要在playerVars中添加wmode参数。当它只在YT.Player下时，它只适用于HTML5播放器。向playerVars添加wmode参数还会将该参数发送到Flash对象，该对象具有自己的z-order问题。 参见：https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/OQRG5rTKBFQ 我将相应地编辑您的答复。 - Dylan McCall
1
我尝试了这个，但它没有起作用。我在YouTube文档中也没有找到任何关于wmode的参考资料。 - sboisse
链接自我第一次发布以来已经更改，设置wmode的方法也发生了变化。现在您可以通过playerVars设置任何Flash参数或YouTube播放器参数。我已更新上面的示例。 - Plastic Sturgeon
完全加载整个API只为了更改可以在URL中轻松更改的值是过度杀伤力。不要使用它。 - fregante
我们中有些人正在使用无边框播放器并已经使用JS API来控制UI。对于我们来说，这个解决方案非常棒！谢谢。 - maxijb
8

在我看来，将?wmode=opaque添加到URL中似乎可以解决这个问题，尽管我还没有在IE中测试过。

对于那些在先前提出的解决方案中遇到麻烦的人，请注意，如果您已经向URL提供其他参数，则初始和号仅起作用。第一个参数必须有一个初始问号：http://www.example.com?first=foo&second=bar

最初我尝试播放视频时得到的是一个黑色矩形框，后来发现测试机器上没有安装Flash并且安装Flash的对话框显示位置偏移太大了！ - Zeb
3
将&amp;wmode=transparent添加到URL中就可以了，已经测试过。
我在自己的WordPress插件YouTube shortcode中使用这种技术。
如果遇到任何问题，请查看它的源代码。
在 YouTube 的 URL 后面添加 &wmode=transparent 解决了所有浏览器的问题。感谢 Tubal 先生，干得好 :) - user657543
1

小提示！确保您在要覆盖嵌入式视频的元素上提高z-index。我添加了wmode查询字符串，但它仍然无法正常工作...直到我提高了其他元素的z-index。:)

0

&wmode=opaque 对我没用（chrome 10），但是&amp;wmode=transparent 解决了问题。

0

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

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

然而，在URL末尾添加?wmode=opaque就可以解决问题！

发现了这个解决方案：http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements
根据URL中包含的其他设置以及使用顺序，&和?都是正确的。显然，如果这是第一个（或唯一的）设置，则使用?，否则使用&。 - Alex
是的，但IE有特殊需求。试一试看哪个在IE 10中有效，哪个无效。我还没有在IE 11中尝试过这个。 - Amber June
0
最近我发现有时候Flash播放器无法识别&wmode=opaque，相反你应该传递&WMode=opaque（注意大写）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接