Auto Play Video On Hover
Auto Play Video On Hover Using Elementor Pro and WordPress
Hi guys in this Tutorial I’m going to show you how to automatically play a video on Hover. It only takes a couple of moments to do, so don’t forget to hit that like And subscribe button, and let’s get into the Tutorial.
Adding a Section and HTML Widget
Okay guys the first thing you need to do is add a section to your page. I’m going to choose one with two columns, and in that First Column. I’m going to add a HTML widget, so I’m going to go in the top left hand side, and type in HTML.
Dragging and Dropping the HTML Widget
Drag and drop that onto your page, and head over to my website where you can copy this code, and paste it into the HTML code box. As you can see a thumbnail has been loaded onto our page. What I’m going to do first is explain the code, and tell you how to edit it.
Understanding the HTML Code Structure
The first URL we find at the top of our code makes this image, and video a link. This is perfect if you want to use this as a preview. When your visitors hover over the image they can click it, and get taken to the full length video.
Explaining Clickable Video Link
I’ll explain that more later in the video. But the next link we go down to lets you select your thumbnail image.
Setting the Thumbnail Image
The final URL is our video. So what I’m going to do now is hover over our image, and let it play. I’ll show you how to change things afterwards.
Demonstrating the Hover Effect
So as you can see as soon as we hover over our thumbnail which starts that’s playing. And if we click on it, it takes us to our website. Something else we can change is the text displayed when we hover over our image.
Changing the Hover Text
To do that we’re going to go up to where it says title in our code. As you can see it says add frosted glass effects glass morphism. If we remove the glass morphism, and hover back over our image, and wait for a second you’ll see it’s been removed from our text.
Updating the Thumbnail Image URL
As I said earlier we can change our thumbnail image. If we highlight this section here, and replace our URL with a new one. It will change our thumbnail. To get your new URL for your thumbnail. You need to go into your media library, click the copy button, and paste it in.
Changing the Video URL
The final Link in our code is at the very bottom, and this is for the video that we display when we hover over our image. If we have multiple videos uploaded to our WordPress media library. We can change this URL, and have different videos playing on Hover on our website.
Previewing the Changes
Once you’ve made all your changes click on the preview button next to the publish button in the bottom left hand side. As you can see if we hover over our image all our changes have taken effect. The last thing I’m going to change is when people click on our video the location they get sent to.
Modifying the Click Destination URL
To do that highlight the text, and type in the new location. This time I’m going to send people to Google. As you can see I’ve typed in, and clicked on the preview button. When I hover over our video, and click on it it sends us to the Google home page.
Duplicating for Multiple Videos
You can add more than one of these. All you need to do is duplicate the section, and column, and you need to change the information inside each HTML box.
Elementor Pro Not Required
Now you don’t need Elementor Pro to be able to use this feature. But if you do want to sign up to Elementor Pro there is a link at the top of the description. It is an affiliate link. It doesn’t cost you any more to use, but it does give me a very small percentage of elementor’s profits if you choose to sign up.
If you have found this Tutorial useful please do hit that like And subscribe button, and check out the rest of my Tutorials in my playlist. Or if you’ve got any questions feel free to drop them in the comments box below or on my blog.
Thanks for watching, and I’ll see you in the next one.
