Auto Play Video On Hover
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.
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.
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.
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.
I’ll explain that more later
in the video. But the next link we go down to lets you select your 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.
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.
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 glassmorphism. If we remove the glassmorphicism and hover back over our image and wait for a second you’ll see it’s been removed from our text.
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.
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.
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.
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
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.
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
