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.
Insert Divi video module Insert through YT URL YT video display
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 section → Theme options → Integration → Add code to the <head> of your blog, previously activating the “Enable header code” option.
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.
