Youtube 的 iframe wmode 问题

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

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

135794 次浏览
小开
最佳答案

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

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

小开

尝试将 ?wmode=transparent添加到 URL 的末尾。

小开

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

对于那些在之前提出的解决方案中遇到麻烦的人，请注意，只有当您已经为 URL 提供了其他参数时，初始符号与符号才能正常工作。第一个参数必须有一个初始问号: http://www.example.com?first=foo&second=bar

小开

将 &wmode=transparent添加到 url 中，就完成了测试。

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

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

小开

&wmode=opaque不适合我(铬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
}
});
}

这是基于谷歌的文档和这里的例子: Http://code.google.com/apis/youtube/iframe_api_reference.html

小开

小费而已！--确保在嵌入的视频上增加元素的 z 索引。我添加了 wmode query 字符串，但它仍然不起作用... ... 直到我提高了另一个元素的 z 索引。:)

小开

我知道这是一个老问题，但它仍然出现在这个问题的顶部搜索，所以我增加了一个新的答案，以帮助那些寻找一个 IE:

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

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

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

小开

最近我看到有时闪存播放器不承认 &wmode=opaque，而是你应该通过 &WMode=opaque太(注意大写)。


提交答案