Play background video on hover

The background video component is awesome. I am trying to figure out how to disable the autoplay and instead have the background video play on hover. Is there anyway to do this?

You forgot to show us what you already have.

Please paste your:

  1. published URL, and
  2. public share link for your project

Hi samliew! This http://eugenes-fantastic-site.webflow.io/ could serve as an example. There is a video I’ve added (using the background video component) and I would like to disable the auto-play and have it only play on hover. It would be great if it could also stop and start in the same place when re-hovering.

ffr - I was able to figure out how to stop and play the video on hover, but am still struggling to disable the initial auto-play. Code for stop/play on hover below:

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}

Change your code and put this in Page Settings > Custom Code > Footer Code:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
    var figure = $(".video").hover(function() {  
        $('video', this).get(0).play(); 
    }, function() {
        $('video', this).get(0).pause();
    }).each(function() {
        $('video', this).get(0).pause();
    });
});
</script>
5 Likes

Thanks, samliew! That works perfectly. If I have 2 or more videos like this, however, it breaks. Is there anything I can do to amend this?

How does it break? Your website isn’t updated.

A post was split to a new topic: Play background video on hover 2