Autoplay of YouTube videos on hover with divi

divi header

Divi’s video module is great for displaying your best YouTube videos on your website, just select a YouTube video, copy its URL and paste it into the module settings.

Would you like them to play automatically when the user hovers over the video?

Well, it’s very easy, just add a code to the Divi administration sectionTheme optionsIntegrationAdd code to the <head> of your blog, previously activating the “Enable header code” option.

header integration to add the code

Paste the following code as in the previous screenshot:

<script>
jQuery(function($) {
var video_url;
$('.et_pb_video iframe').hover(function(){
$(this).data('src-orig', $(this).attr('src'));
$(this).attr('src', $(this).data('src-orig')+'&autoplay=1&mute=1');
}, function(){
$(this).attr('src', $(this).data('src-orig'));
});
}); 
</script>Code language: HTML, XML (xml)

Save the changes and that’s it!

What you will get will be that the visitor, when hovering over your YouTube videos, they will start automatically, and removing the cursor from the video will make it stop.

Additionally, the code also mutes the video with the mute=1 parameter, per YouTube’s autoplay policies, but the user can activate the sound by clicking on the speaker icon.

How useful was this post?

Click on a smiley to rate it!

Average rating 1 / 5. Vote count: 2

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top