Playing videos on hover in Webflow

Webflow is a magical tool for creating custom websites. With its visual interface, you can style the elements you want as you wish. In addition to the visual interface, you also have the possibility to add your own code on your pages. So the possibilities are endless.

In our Webflow tutorial of the day, we will focus on videos. To be more precise, we are going to show you how to add a video playback animation on mouse over (on hover) thanks to a little code. If you don't know anything about code (HTML, CSS, Javascript), don't worry, we will show you the procedure from A to Z.

Step 1: Direction Webflow

The first and perhaps most important step in this tutorial is to go to your Webflow project. Go to the page and section where you want to add your video.

Step 2: Background Video

Once you are in the section, you can add thevideo background element.

You can then upload your video and give it a class. It is important to give a precise class to this element. In the manager style, you will need to remember to adjust the z-index of the video so that it is displayed correctly.

We can now see that our video is embedded, but that it plays automatically and in a loop if you have checked this option. To add our mouse-over animation, we'll add a little bit of javascript code.

Step 3: Javascript code

Once you have added your video to the video background element and given it a class, you can go to your page settings.

In the parameters of a page in Webflow, we see that there are several places where we can add code. In our case, we will add the javascript code in the Before Body Tag editor. In this place, you just have to copy and paste the following code.

Be careful, in the parentheses of the first line after the dot, you must insert the name of the class that you put in your video (in our case, we added: video-hover_video). Thus, all videos that have this class will automatically have the animation.

The javascript code :

<script>
const vid = document.querySelectorAll('.video-hover_video');
vid.forEach(element => {
  element.getElementsByTagName('video')[0].pause(); 
  element.addEventListener("mouseover", hoverIN, false); 
  element.addEventListener("mouseout", hoverOUT, false);  
  
  function hoverIN(){  
    element.getElementsByTagName('video')[0].play(); 
  } 
  
  function hoverOUT(){  
    element.getElementsByTagName('video')[0].pause(); 
    element.getElementsByTagName('video')[0].currentTime = 0;
  }
});
</script>

Step 4: Publication of the site

On Webflow, you cannot see the effects of a code applied in the parameters of the page directly in the designer. To check that your effect is well applied, you just have to publish your site and enjoy your new animation.

Now you know how to add the "Play video on hover" animation in Webflow.

To learn more about Webflow, you can find our blog or our YouTube channel!

Tutorial to apply the glassmorphism effect in Webflow