Colour Section — Background Video with Start/Stop Control - Support

Tagged: background video, controls

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
October 27, 2022 at 1:26 pm #1370452

cd2s
Participant

Hello Kriesi Team

We have been using a colour section with a background video autoplay and on loop on a client’s website (initial request when we built the website about 4 years ago). The client would now like to have start & stop controls and I don’t seem to be able to see how to do that in the colour section. We need to use the colour section to have a title showing over the video.

Thanks so much for your help.
The link is below in case you need it.

Thanks, Corina

October 28, 2022 at 11:07 am #1370543

Ismael
Moderator

Hey Corina,

Thank you for the inquiry.

Have you tried replacing the color section with a fullscreen slider? Add a video slide, then configure the options in the Styling > Video Settings toggle. In the fullscreen slider, users can click the slide directly to pause or play the video.

Best regards,
Ismael

October 28, 2022 at 7:05 pm #1370600

cd2s
Participant

Hello Ismael
Thanks heaps. Just tested this and I can start/stop by clicking in the middle of the image but I can’t see any controls at the bottom. How does someone know that it has the option? I did not hide them in the styling (see screenshot — https://www.dropbox.com/s/dkojrjlpod3f6kh/video%20controls.png?dl=0)

Also, it seems to only work in one language. if I switch (top right corner), I just get a still (even though there is no still) and the start/stop does not work?

Link to the staging server below in case you’d like to view it.

All the best,
Corina

November 2, 2022 at 4:42 am #1371010
Ismael
Moderator
Hi,

How does someone know that it has the option?

You can add a note about the slider or video player controls for the users in the caption field, which we can reposition using css.

You can also add the following elements in the caption field to create a custom play/pause controls.
```
<div class='av-play-controls'>
    <span class='play'>Play</span>
    <span class='pause'>Pause</span></div>
```
Add this css code to reposition the controls and toggle them based on the playback status of the video.
```
.av-play-controls {
    position: absolute;
    right: 50px;
    bottom: 50px;
}

.av-video-playing .av-play-controls .play {
    display: none;
}

.av-video-paused .av-play-controls .pause {
    display: none;
}
```
The control text (play/pause) can be replaced with a custom image or icon.

Best regards,
Ismael
November 4, 2022 at 11:55 am #1371327

cd2s
Participant

Hello Ismael
Thanks so much. Unfortunately, that did not work. It only added the text ‘Play / Pause’ on top of the video. But it was just text, no action assigned to the text.

I am now trying to solve this by using the layer slider and I have the video working with the vimeo start/stop showing. BUT the text layer over the video for some reason is not showing. I’ve tried to manually set the z-index to no avail.

Have you had this issue before? Below the link to a screenshot from the backend, where the text layer is showing.

The login details are listed above should you need them. The link to the front end is also below in the private section.

thanks so much.
corina

November 4, 2022 at 12:55 pm #1371336

Guenni007
Participant

Yes, these texts don’t have an event that they trigger – but they are just to show visitors that there is something clickable , where it doesn’t matter if you hit these texts or not. – On my end this is working with slider alb and selfhosted videos.
i now go and test your layerslider setting – with vimeo video.

November 4, 2022 at 3:26 pm #1371344

cd2s
Participant

Hello Guenni007

Thanks so much. I am not quite understanding the event trigger you are referring to. There is really no animation or events we need. I just need the video with controls full screen width; as it is now and the title showing over it, but I don’t know layer slider at all. Trying to figure it out.

Appreciate your help.
Kindest, Corina

November 4, 2022 at 3:37 pm #1371348

Guenni007
Participant

i tested Ismaels advice – and there is a play/pause text on the video. with the css he provided – only one of them could be seen
see: https://enfold.webers-webdesign.de/videobackground/

on layerslider i could insert vimeo videos – on hovering those areas – the controls are there:
https://webers-testseite.de/videobackground-2/
even with video in video ;)

November 4, 2022 at 4:53 pm #1371364

cd2s
Participant

Hello Guenni007

thank you so much for your time and checking these things. I do have the controls for the video in the layer slider, that is no longer my issue. My issue is, that I’ve got a title on a separate layer in layer slider (you can see this in the screenshot (again inserted in the private section below). BUT the title is not showing on the video, even though the order of the layers is correct as you can also see in the screenshot. I also tried manually adding a z-index to no avail.

The title is not showing in the front end and I don’t know why.
thanks so much.
Corina

November 5, 2022 at 3:41 pm #1371442

Mike
Moderator

Hi,
Thanks for the login, I found that you used a layerslider text layer to show html, I hid your layer and added a new html layer with your code and now the title shows, please clear your browser cache and check.

Best regards,
Mike

November 5, 2022 at 5:35 pm #1371458

cd2s
Participant

Hi Mike

Perfect, thanks so much, (and facepalm moment)… appreciate your help. Should use the layer slider more to get the hang of it.

Have a great weekend & all the best,
Corina

November 5, 2022 at 6:41 pm #1371468

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Colour Section — Background Video with Start/Stop Control’ is closed to new replies.