Buttons, Bars on Top of Video Stop Playback

[efullman]

Hi,

Great theme!

I just need a little guidance on how to customize for a specific use-case.

I want to be able to place a modal and search bar on top of an image displayed on the home page. I’ve got this working on another site with Visual Composer.

Using Kleo – the video file is embedded in the row through Visual Composer. They play as they should, and look great. The modal window button and the search bar also display as they should, and look fine.

However, when they are on top of a video, both the modal button (from VC) and the search bar (from VC) are disabled. They display, but they are disabled. When you click on them they also stop the video, something that I don’t want in this case.

I believe this is tied to to the function that displays the video. I read a few posts where it looks like you added start/stop functionality when you click on a video that is playing. I think this is overriding the button inputs for the modal and the search bar. If I could just comment out the start stop on the video, or override it somewhere I think that would fix it.

Your help is appreciated.

[efullman]

I accidentally put “image” in the fourth sentence above, but I meant “video”. This is about displaying a video file not an image file.

[efullman]

I figured this one out. The clicking play/stop with the video has to do with pointer-events being set on for the video hence, anything on top of the video like a modal button or a search bar input is ignored. So I needed to reverse the process.

I created two extra classes: pointer-events-on and pointer-events-off in the Kleo Child style.css.

COPY CODE

.pointer-events-off {
  pointer-events: none;
}

COPY CODE

.pointer-events-on {
  pointer-events: all;
} 

Then I went into Visual Composer into the Row, and added a .pointer-events-off to the extra class box at the bottom. I also went into the Column controls for the same Row and added a .pointer-events-on to the extra class box at the bottom of that control panel.

This reverses the way that the controls work.

[efullman]

One additional point. The Row controls I accessed were for the Background Video. So the class box below where you enter the video file URLs.

[mwoodham]

Thanks so much for this! Was getting pretty frustrated trying to work this out.

[Author]

Posts