脚本不允许 lightbox 覆盖嵌入的 Youtube 视频(wmode=透明),但其他脚本可以工作

发布于 2025-01-07 07:53:51 字数 1937 浏览 0 评论 0原文

我在覆盖 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&amp;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&amp;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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

水水月牙 2025-01-14 07:53:51

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?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文