Search code examples
javascriptflashgoogle-chromeprototypejsswfobject

swfobject.embedSWF youtube video overlay in chrome with opacity not working

I am having a problem with a youtube overlay video in chrome, the overlay has an opacity of 0.8 however in chrome the youtube video also gets the opacity applied so you can see through it.

I am using swfobject.embedSWF and ProtoTube addon on this task but cannot work out why this is happening, any ideas?

The function is:

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);
    },

Sample URL of the issue can be found here: http://tinyurl.com/b48u39c (click on the play video link on the main image in chrome to see the problem)

Solution

  • I ended up using rgba(0, 0, 0, 0.8) which fixed it in the CSS