# Read Videos on Hover in Webflow

Tutorial3 minPublished on Mar 20, 2023Updated on ![Video Player Icon and Webflow Tutorial](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671226c5251e2328f8cf5fac_64760069e93084646c9ef1d0_626b979fe70fbe65328820f9_Open-Graph-webflow-video-hover.png)Table of contents

[

Copied](#)[

](#)[

](#)[

](#)
- [H2 Example](#)

Use AI to summarize this article[

ChatGPT](#)[

Claude](#)[

Grok](#)[

Perplexity](#)[

Google AI](#)Key pointsWebflow is a magical tool for creating custom websites. With its visual interface, you can style elements to your liking. In addition to the visual interface, you also have the option to add your own code to your pages. As a result, the possibilities for creation are endless.

In today's Webflow tutorial, we will focus on videos. More specifically, we will show you how to add **a video playback animation on mouse hover** with a little bit of code. If you're not familiar with coding (HTML, CSS, Javascript), don't worry, we will guide you through the process from start to finish.

## Step 1: Go to Webflow

The first step, and perhaps the most important one in this tutorial, is to navigate to your [Webflow](/tools/webflow) project. Go to the page and section where you want to add your video.

## Step 2: Background Video

Once you're in the section, you can add the **background video element**.

![background video elements in Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671226c6251e2328f8cf5fdd_64760069e93084646c9eef3a_626a5459cb07e39ca943ac9d_Background-video-webflow.png)

You can then upload your video and assign it a class. It is important to **give a specific class** to this element. In the style manager, make sure to **adjust the z-index** of the video to ensure it displays correctly.

![Upload background video in Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671226c6251e2328f8cf6000_64760069e93084646c9eef31_626a546c3dbce76b1ced0807_Upload-background-video-webflow.png)![example of a background video in Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671226c6251e2328f8cf5fe0_64760069e93084646c9eef30_626a547667228551a208192c_Background-video-publish-webflow.png)

We can now see that our video is embedded; however, it automatically plays and loops if you have selected that option. To add our hover animation, we will insert a small piece of JavaScript code.

## Step 3: JavaScript Code

Once you have added your video to the background video element and assigned it a class, you will be able to access your page settings.

In the page settings in Webflow, you will find several places where you can add code. In our case, we will add the JavaScript code in the **Before Body Tag** editor. At this point, you just need to copy and paste the following code.

Note that in the parentheses of the first line after the dot, you must insert the name of the class you gave to your video (in our case, we added: video-hover_video). This way, all videos with that 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>
`![JavaScript code for play video on hover animation in Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671226c6251e2328f8cf5fda_64760069e93084646c9eef37_626a548653e1fcff582aa787_code-javascript-play-video-on-hover-webflow.png)

## Step 4: Publish the Site

In Webflow, you cannot see the effects of code applied in the page settings directly in the designer. To verify that your effect has been applied correctly, simply **publish your site** and enjoy your new animation.

![result of the play video on hover animation in Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671226c6251e2328f8cf6003_64760069e93084646c9eef47_626a544741283bf16d72f2fa_Animation-lire-video-on-hover-webflow.gif)

There you go, you now know how to add **the 'Play video on hover' animation in Webflow**.

To learn more about Webflow, you can check out our [blog](/blog) or our [YouTube channel](https://www.youtube.com/channel/UC82WKZ4d9ZyrugZaEKenWEw)!

{{custom-blog-cta}}

Tutorial for [applying the glassmorphism effect in Webflow](/blog/webflow-tutorial-glassmorphism-effect)

Our Blog[Check it out !

](/blog)![Thibaut Legrand](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a47ec4cabceb0d6aa7c2e_thibaut-website%20(1).webp)Thibaut LegrandCofounder at Vydera & Technical Solutions Architect[

](/team/thibaut-legrand)[

](https://www.linkedin.com/in/thibaut-legrand-digidop/)[

](https://twitter.com/lgd_thibaut)+1200 readers

## Stay ahead of the curve!
Subscribe now for expert insights.

[Subscribe

](https://digidop.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Preview Newsletter

](https://digidop.substack.com/)

## Suggested articles

![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab922fa556f97c19ea7db9a_Best%20B2B%20SaaS%20Agencies%20in%202026_EN.webp)DocumentationAll blog post

### Top 20 Web & Digital Agencies for B2B SaaS in 2026

[Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026![Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDevelopmentAll blog post

### Webflow launches Source. Our take on this shift.

[Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.![Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationAIAll blog post

### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers

[Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles

](/blog)Every great website  
starts with a conversation[Talk to an expert

](/contact)[Book a call

](/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)