How do i change opacity of video? (Revolution Slider)

Support
#1

I used Revolution Slider to make a slide with a video background, and i want to change the opacity. How would i do this?

Summary

www.benjaminaproductions.com/home

#2

Hi There,

Thank you for writing in, on your Slider Settings > Layout and Visual tab set an opaque background-color. This color will be overlay on the background video giving the semi-transparent effect. (https://prnt.sc/gmvrpe)

Make sure your slides has a transparent background (https://prnt.sc/gmvsc6).

Cheers!

#3

Thanks for the reply - that didn’t work, though. I think part of the problem is this…

When i created a slide with a transparent background, and then added the video (mp4) to the page’s Slider Settings: Above Masterhead, the video wouldn’t show up. So what i wound up doing was instead creating a slide with an HTML 5 video background, and just used that.

Summary

Here is my homepage, using the HTML5 slider - www.benjaminaproductions.com
Here is a test page with a transparent layered slider - https://benjaminaproductions.com/brand-new-site-coming-soon

#4

Hi There,

Did you add an opaque background-color on the Slider Settings, this is how it should look when you do (https://prnt.sc/gn7xtb). If the video did not show up maybe you added a solid color background.

You can also add this on your Theme Options > CSS

/*opacity of the above masthead slider*/
.x-slider-container.above {
	opacity: 0.50;
}

Cheers!

#5

Ok, so a few follow up questions -

  1. These are the original instructions that i followed (https://theme.co/apex/forums/topic/how-to-add-video-above-header-nav-bar-like-integrity-main-demo-manually/) but when i do this, it only shows a black box, and no video actually plays. Any idea why?

  2. Since the instructions from step 1 didn’t work, instead, i created the HTML5 video layer, and from the Page Settings, under the Slider Settings: Above Masthead section, i selected my slide, but left the Optional Background Video box empty. This seemed to work just fine.

  3. I went into the slide i created in step 2, and i added a a background color, and made it 50% transparent. When i do this, the video still plays at full opacity. Is it maybe because the color background is technically behind the HTML5 video background, instead of overtop?

  4. I used the css code, and it worked perfectly. The problem is, I want to add a logo overtop of the video layer of the slide, and when i use that code, it also effects the opacity of the logo (which i want to remain full). Any ideas?

Thanks so much!

#6

Hi There,

  1. Well, in that case please scrap the custom CSS given, as that will affect the entire slider and slides.

  2. Yes, that assessment is correct. So you really need to put the video as the Optional Background Video and not as a layer.

  3. I think this illustration should help a little bit.

screenshot

Imagine that blue layer at the very back is the Optional Background Video and the next in front of that is the Slider Settings > Layout and Visual > Background Color, the rest are the slides (and its layers).

There you can see if you add the video as a layer, the Slider Settings > Layout and Visual > Background Color won’t matter.

While if you add the video as the Optional Background and put an opaque (semi-transparent) color in the Slider Settings > Layout and Visual > Background Color, you can imagine that the video will have some kind of an overlay color effect. Of course you need to keep the slides to have a transparent background, because it will cover everything if it has an image or solid background color in it.

  1. That instruction did not mention about Slider Settings > Layout and Visual > Background Color, so most likely that black box that you see is the background color that you did not set to transparent or semi-transparent.

Hope this shed some lights,
Cheers!