Play Video on Hover

How to add Play Video on Hover in Webflow?

_{Step #1}

Copy the Play Video on Hover <script>

Integrating our Play Video on Hover tool into your website is a breeze! Follow these easy steps to get started:

1. Click on "Pages" in the left navigation or press "P" on your keyboard
2. Select the settings icon beside the page you want to add the script to
3. Scroll down to the "Before </body> tag" section
4. Simply copy the script we've provided and paste it here

That's it!

_{Step #2}

Upload Background Video

Add a background video element to your site and upload your video (we have used a mp4 file). Publish your site on staging.

_{Step #3}

Inspect Your Page

On your staging link, click inspect. You can also do this by pressing

• Cmd+Shift+C on Mac
• Ctrl+Shift+C on Windows
  Or
• Right click on the your site and inspect the page

Find your video element. In your elements tab, look for the video URL.

_{Step #4}

Add Embed and Classes

1. Add a div block and an embed element within it with the following code:
   <div class="hover_video_wrapper">
   <video class="video" loop preload="yes" muted width="100%" >
   <source src="url" type="video/mp4">
   </video>      
   </div>
   
   NOTE: type of video is mp4 in the embed because of the file type used. Look for the right tags to add in your HTML embed code if you use a different file type.
2. Replace url with your video url found in the previous step.
3. Classes to be used: 
   ‍hover_video_wrapper : div block that is holding the embed element
   video : embed element
   Note: on mobile, you'll want the videos to autoplay. For this, you need to copy the embed element. Change the class name from "video" to anything else and display this on mobile. Our script targets the class "video".

_{Step #5}

Delete Background Video

_{Step #6}

Publish your site

It's highly recommended to publish your site on staging environment to ensure the scrip. Once you have confirmed it, you can publish it to your primary domain.