脚本不允许 lightbox 覆盖嵌入的 Youtube 视频(wmode=透明),但其他脚本可以工作
我在覆盖 YouTube 上的视频时遇到了问题,但通过设计更改解决了这个问题(不需要再覆盖它们)。
所以我有一个用户可以运行的脚本,它调用一个 javascript 文件来在当前网页上执行其他操作。它所做的一件事是弹出一个覆盖页面的灯箱。当然,它不会涵盖嵌入的 Youtube 视频,因此我需要做一些更改。我做了必要的改变,但没有成功。我不断尝试,最终制作了一个仅包含嵌入视频和 .jpg 的页面(如果没有图像,我的脚本将无法运行)。
我查看了 Pinterest 脚本添加到嵌入视频部分的内容,虽然几乎相同,但它们确实有一个 autoplay=0 ,所以我添加了它,这样我就可以亲眼看到它是完全相同的。如果我运行 Pinterest 脚本并关闭它,然后运行我的脚本,我的脚本可以正常工作。如果我运行我的脚本,然后运行 Pinterest 脚本,然后再次运行我的脚本,我的脚本就可以工作。所以我相信这意味着我不会添加任何告诉页面“继续将视频放在顶部”的内容。
我的脚本部分添加了 wmode:
var players = document.getElementsByTagName('embed');
var len = players.length;
for(var i=0;i<len;i++){
players[i].setAttribute('wmode', "transparent");
players[i].src += "?autoplay=0&wmode=transparent";
}
Minimal page html:
<html>
<head>
</head>
<body>
<img src="img/title.jpg">
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/OOpkr8uNWpk"></param>
<embed src="http://www.youtube.com/v/OOpkr8uNWpk" type="application/x-shockwave-flash" width="425" height="350"></embed>
</object>
</body>
在 Pinterest 脚本之后:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/OOpkr8uNWpk">
<embed src="http://www.youtube.com/v/OOpkr8uNWpk?autoplay=0&wmode=transparent" type="application/x-shockwave-flash" width="425" height="350" wmode="transparent">
</object>
在我的之后:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/OOpkr8uNWpk">
<embed src="http://www.youtube.com/v/OOpkr8uNWpk?autoplay=0&wmode=transparent" type="application/x-shockwave-flash" width="425" height="350" wmode="transparent">
</object>
因为它们是相同的,所以我不知道为什么它不起作用。
I had problems covering videos on Youtube itself but solved that with a design change (don't need to cover them any more).
So I have a script the user can run and it calls a javascript file to do other stuff on the current webpage. One thing it does is bring up a lightbox that covers the page. Of course it won't cover embedded Youtube videos and so I need to do a few changes. I did the necessary changes and it didn't work. I kept trying and trying and eventually made a page with just an embedded video and a .jpg (my script won't run if there are no images).
I looked to see what the Pinterest script added to the embedded video portion and while it was almost identical they did have an autoplay=0 in there so I added it just so I could see for myself that it is exactly the same. If I run the Pinterest script and close it, then run mine, mine works fine. If I run mine, then the Pinterest script, then mine again, mine works. So I believe this means I'm not adding anything that tells the page "Go ahead and put the video on top anyway."
My portion of the script that adds the wmode:
var players = document.getElementsByTagName('embed');
var len = players.length;
for(var i=0;i<len;i++){
players[i].setAttribute('wmode', "transparent");
players[i].src += "?autoplay=0&wmode=transparent";
}
Minimal page html:
<html>
<head>
</head>
<body>
<img src="img/title.jpg">
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/OOpkr8uNWpk"></param>
<embed src="http://www.youtube.com/v/OOpkr8uNWpk" type="application/x-shockwave-flash" width="425" height="350"></embed>
</object>
</body>
After Pinterest script:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/OOpkr8uNWpk">
<embed src="http://www.youtube.com/v/OOpkr8uNWpk?autoplay=0&wmode=transparent" type="application/x-shockwave-flash" width="425" height="350" wmode="transparent">
</object>
After mine:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/OOpkr8uNWpk">
<embed src="http://www.youtube.com/v/OOpkr8uNWpk?autoplay=0&wmode=transparent" type="application/x-shockwave-flash" width="425" height="350" wmode="transparent">
</object>
Since they are the same, I have no idea why it is not working.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
wmode 可能在 html 中可见,但尚未生效 - 尝试克隆并替换 flash 的 html 以强制重新加载(只是为了看看这是否真的是问题,我认为更改 src 会强制重新加载,但我不是当然)
另外,您可以粘贴灯箱的 html/css 或制作一个可以演示问题的 jsfiddle 吗?
The wmode may be visible in the html but has not taken effect - try cloning and replacing the html of the flash to force a reload (just to see if that's really the problem, I think changing the src forces a reload but I'm not sure)
Also, can you paste the html/css of the lightbox or make a jsfiddle that can demostrate the problem?