Video Lightbox on Image

[coracle]

Hi there,

I’ve been scouring other video lightbox threads here and I’m totally confused. Currently, I have this code in a Classic Raw Content Element:

[image src="https://johnknoxbc.org/wp-content/uploads/2019/01/JKCS-Video-Feature.jpg" link="true" href="https://youtu.be/embed/zs1F7AVnRr8?rel=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen;showinfo=0" frameborder="0" lightbox_video="true" class="lbx3"][lightbox selector=".lbx3"]

Whenever my mouse hovers over the image, I can see the video playing as a layer. When I click on the image, the lightbox pops up and I have to click on the lightbox to get the video to play. So two questions: 1. How do I get the video to stop auto-playing as a layer under the image? and 2. How do I get the video to start auto-playing in the lightbox?

URL: https://johnknoxbc.org/home-with-video/

Thanks!

[friech]

Hi Coracle,

Thank you for writing in, if you want to remove the transparency of the image on hover, please add this to your Page > CSS or Theme Options > CSS

.x-raw-content a.x-img:not(.x-img-thumbnail):hover {
	opacity: 1;
}

It seems the reason why that video is playing behind the image is that you set that video as the background-video of the Section, please inspect your section and unset that video background.

Hope it helps,
Cheers!