All geek questions in one place

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

I have a problem with the video on YouTube, the overlay has an opacity of 0.8, but in Chrome, the YouTube video also gets an opacity so you can see it.

I use swfobject.embedSWF and ProtoTube addon for this task, but I can not understand why this is happening, any ideas?

Function:

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

An example problem URL can be found here: http://tinyurl.com/b48u39c (click the video playback link on the main image in chrome to see the problem)

+4
source share
2 answers

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

+1
source

With {opacity: 0.8} in Firefox 16.0.2 and IE 9, the movie looks exactly like in Chrome 23 (translucent with the image and text visible through it). In Opera 12.02, a movie looks like bleached (mixed with lots of white).

So, IMHO, which is not a specific error of Chrome. This behavior of browsers somehow applies the opacity of an element to a nested object (because object nested in your div class="overlay" ).

Update: place your swf player after div class="overlay" with a higher z-index (for example, {z-index: 5001;} , and not inside the overlay.

+2
source

Source: https://habr.com/ru/post/1444834/

More articles:


All Articles