Streaming live at 10am (PST)

Play background video on hover


#1

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?


Video galleries in webflow?
#2

You forgot to show us what you already have.

Please paste your:

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

#3

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.


#4

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(); 
}

#5

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>

#6

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?


#7

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


#8

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


#9