As a website designer, you must do everything you have put into thinking of ways to keep your visitors from getting bored and leaving your web page quickly for nothing. Playing a video on hover can be a great way to add more interactivity to your web page.
Playing videos on hover in Elementor is a great way to improve your online presence because it has many benefits for both website owners and visitors. These are a few important benefits to think about:
- Hovering over videos results in a higher level of engagement, which attracts visitors’ attention and encourages them to explore your content more thoroughly.
- Enhanced Storytelling: Videos tell stories in ways that static images and text simply can’t. One of the best ways to leave a lasting impression on your visitors is to use hover videos to tell interesting stories on your webpage.
- SEO Boost: Google loves engaging content, and videos can enhance your search engine ranking, drawing more organic traffic to your website.
In this article, we will show you how to create a video that plays when a user hovers over an image using Elementor, one of the best page builders for WordPress.
How to Play Video on Hover in Elementor
Creating a video that can play when users hover over a static image using Elementor is very easy. You only need to add a simple HTML code to the HTML widget.
1. Add the HTML Code
First, go to the Elementor editor by creating a new post type (page or post) or selecting the existing one.
Once you enter the Elementor editor, add the HTML widget to the canvas area. Next, copy the HTML snippet below and paste it into the HTML code field.
<video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;"> <source src="YOUR-VIDEO-URL" type="video/mp4"></source> </video>
2. Input Your Video URL
Alright, it’s time to input the URL of your video inside the HTML snippet by replacing YOUR-VIDEO-URL.
To get the URL of the video, you can upload your video to the WordPress Media Library, then copy its URL.
Note: This method only covers sources that are self-hosted. Make sure you get the video URL from your website in order to avoid using any third-party video platforms such as Vimeo or YouTube.
That’s it. Please feel free to edit and style up your widget, column, or section to give the best look for your web page. Don’t forget to save or publish your page if you want to.
The Bottom Line
Playing video on hover in Elementor is a simple yet powerful technique to enhance user engagement, improve storytelling, and boost SEO. With just a few lines of HTML code, you can transform a static image into an engaging video experience, keeping your web visitors hooked and exploring your content more thoroughly.
