Youtube iframe wmode问题

通过jQuery使用javascript，我添加了一个带有youtube url的iframe，以在网站上显示视频，但是从youtube加载到iframe中的嵌入代码没有wmode=“不透明”，因此页面上的模式框显示在youtube视频下方

---

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

尝试将

？wmode=opaque

添加到URL，或者

&wmode=opaque

如果已经有一个参数

---

如果它不起作用，请尝试此操作，

&；wmode=transparent

也可以在IE浏览器中使用。

尝试在URL末尾添加

？wmode=transparent

。为我工作。

在URL中添加

？wmode=opaque

似乎可以解决这个问题，尽管我还没有在IE中测试它

---

对于那些对前面提出的解决方案有困难的人，请注意，只有在您已经向URL提供了其他参数的情况下，初始符号AND才会起作用。第一个参数必须有一个初始问号：

http://www.example.com?first=foo&second=bar

添加

&；wmode=对url透明

，您就完成了测试

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

---

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

&wmode=opaque

不适合我（chrome 10），但

&；wmode=transparent

立即清除了该问题。

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

// 2. 此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”http://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
// 3. 此函数用于创建（和YouTube播放器）
//API代码下载后。
var播放器；
var initialVideo='ApkM4t9L5jE'；//你的YOUTUBE视频ID
函数onYouTubePlayerAPIReady（）{
console.log（“onYouTubePlayerAPIReady”+初始视频）；
player=新的YT.player（'player'{
高度：'381'，
宽度：“681”，
wmode:'透明'，//这里是秘制酱汁
videoId:initialVideo，
PlayerBars:{'autoplay'：1，'rel'：0，'wmode'：'transparent'}，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}

这是基于谷歌文档和以下示例：

---

只是一个提示--确保在嵌入视频上设置要覆盖的元素的z索引。我添加了wmode查询字符串，但它仍然不起作用……直到我增加了另一个元素的z索引。：）

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

将

&wmode=opaque

添加到URL末尾在IE 10中不起作用

但是，添加

？wmode=opaque

就可以了

---

---

在这里找到了这个解决方案：

最近，我看到flash播放器有时无法识别

&wmode=opaque

，因此您也应该传递

&wmode=opaque

（注意大写）。

很好！适用于firefox和chrome，但由于某些原因，不适用于IE。。。有什么想法吗？试试使用&；wmode=transparent instead“&；wmode=xxxx”设置假定您已经在URL中传递参数。我的情况不是这样，所以我需要在URL中添加“？wmode=xxxx”

opaque

应该更有效。Shabith-“wmode=opaque”应该是“wmode=opaque”（小写字母“o”）添加&；wmode=在YouTube URL解决所有浏览器的问题后透明。谢谢Tubal先生，干得好：）不管我想展示的视频是什么，我最初得到的是一个黑色的矩形。。原来测试机没有安装flash，安装flash的对话偏移太多！请注意，这也需要PlayerBars中的wmode。当它刚好低于YT.Player时，它将只适用于HTML5播放器。将wmode添加到playerVars中也会将该参数发送到Flash对象，该对象有自己的z顺序问题。请看这里：我将相应地编辑您的答案。我尝试了这个，但没有成功。我在YouTude文档中也没有找到任何对wmode的引用。自从我第一次发布以来，链接发生了变化，设置wmode的方法也发生了变化。您现在可以通过PlayerBars设置任何flash参数或youtube播放器参数。我已经更新了上面的示例。加载整个API只是为了更改URL中可以轻松更改的值，这完全是过火了。不要使用这个。我们中的一些人使用无铬播放器，并且已经使用JSAPI来控制UI。对我们来说，这个解决方案简直太棒了！谢谢，在我看来，“透明”应该是首选选项。

&

和

？

都是正确的，这取决于它们的使用顺序以及URL中包含的其他设置。显然，如果这是第一个（或唯一的）设置，则使用

？

，否则使用

&

。是的，但IE有特殊需要。试一试，看看哪个在IE10中有效，哪个不起作用。我还没有在IE 11中尝试过。这仍然是一个问题吗？我以前使用过这个解决方案，但无法在最新的Chrome/Firefox/IE中重现原始问题。