swfobject.embedSWF youtube 视频覆盖在 chrome 中，不透明度不起作用答案

【问题标题】：swfobject.embedSWF youtube video overlay in chrome with opacity not workingswfobject.embedSWF youtube 视频覆盖在 chrome 中，不透明度不起作用
【发布时间】：2012-11-08 15:07:06
【问题描述】：

我在 chrome 中使用 youtube 覆盖视频时遇到问题，覆盖的不透明度为 0.8，但在 chrome 中，youtube 视频也应用了不透明度，因此您可以看穿它。

我在这个任务上使用了 swfobject.embedSWF 和 ProtoTube 插件，但无法弄清楚为什么会发生这种情况，有什么想法吗？

函数是：

getVideoEmbed: function(wrapper) {
        var wrapperID = wrapper.identify();
        var flashvars = {
            fs: this.options.fs,
            autoplay: this.options.autoplay,
            loop: this.options.loop,
            hd: this.options.hd,
            showinfo: this.options.showinfo,
            rel: this.options.rel

        };
        var params = { 
            wmode: "transparent",
            allowScriptAccess: "always",
            allowFullScreen: true,
            menu: false
        };
        var atts = { };
        swfobject.embedSWF(this.options.youtubeVideoUrl+this.videoID, wrapperID, this.options.playerWidth, this.options.playerHeight, "9", null, flashvars, params);
    },

可以在此处找到问题的示例 URL：http://tinyurl.com/b48u39c（单击 chrome 中主图像上的播放视频链接以查看问题）

【问题讨论】：

标签： javascript flash google-chrome prototypejs swfobject

【解决方案1】：

在 Firefox 16.0.2 和 IE 9 中使用 {opacity: 0.8}，电影看起来与 Chrome 23 中的完全一样（半透明，图像和文本可以通过它看到）。在 Opera 12.02 中，电影看起来有点漂白（混合了大量的白色）。

所以恕我直言，这不是 Chrome 的特定错误。这是浏览器的行为 - 以某种方式将元素的不透明度应用于嵌套对象（因为 object 嵌套在您的 div class="overlay" 中）。

更新：将您的 swf 播放器放在div class="overlay" 之后，z-index 更高（例如{z-index: 5001;}，而不是在覆盖层的内部。

【讨论】：

【解决方案2】：

我最终使用了 rgba(0, 0, 0, 0.8)，它在 CSS 中修复了它

【讨论】：