Help with Background Video

Beaver Builder
1

Hi there,
I am wondering if it is possible to pause a Background Video when an action is taken in that row?
So when someone clicks a button, the background stops.
Any suggestions on this?
Many thanks!
John

2

Hi John,

You should be able to do this by adding the JS below to Global Settings > JavaScript (BB active on your page).

(function($){
    $( window ).load( function(){
        
        if ( window.YT && YT.loaded ) {
            var player = YT.get('widget2');
            
                $( '.row-with-yt' ).hover( function(e){
                        
                     player.pauseVideo();
                        
                }, function(){
                    player.playVideo();
                });  
        }
    });
})(jQuery);

Then you’ll want to add a class of row-with-yt to your row via Row Settings > Advanced Tab > HTML Element > Class.

3

HI Danny,

Thank you fro your input.
I did try adding that and it is not working.
Does it matter that it is a Vimeo Video as opposed to a Youtube one?

And do I need to add a # or . to the class- as in
#row-with-yt
or
.row-with-yt

4

For Vimeo, you can try:

(function($){
   
    $(function(){
        var vimeoWrap = $('.row-bg-vimeo'),
            vmPlayer = vimeoWrap.find('.fl-bg-video').data('VMPlayer');
            
        vimeoWrap.hover(function(){
            vmPlayer.pause();
        }, function(){
            vmPlayer.play();
        });
        
    });
    
})(jQuery);
5

Thanks aiagin Danny,

So what is the name of this class to add to the row?
I tried
vmPlayer
and
. vmPlayer
But neither of them seemed to trigger the video pause.

6

The class is ‘row-bg-vimeo’

7

Hello again Danny,

OK - I have got it working as you have written it.
The thing is that I do not want the video to stop on a hover over the background video…
I want it to stop when someone clicks on a button which sits on a row, on top of the Background Video.

What would I need to change for that to happen?
Thanks again for this great help - very appreciated!

8

Hi Danny,

On the youtube video JS code, do I need to substitute something for the widget2?
My hovering doesn’t seem to be working.