How To Enable “One-Click” Play Functionality In The Divi Video Module

How To Enable “One-Click” Play Functionality In The Divi Video Module

**This tutorial only applies if you are using YouTube or Vimeo videos**

The Divi Video Module is an extremely easy and intuitive way to insert videos into your pages and posts. Within the Video Module Settings, you can upload a self-hosted MP4 and WEBM file, insert a link to a YouTube or Vimeo video, add an image for the overlay, and change the ‘Play Icon’ color.

As simple as the video module is for us to set up on the back-end, there is one problem that will annoy your web design clients as well as visitors to the website: If you are using a YouTube or Vimeo video, the play button must be pressed TWICE in order for the it to begin playing. I know, I know, this sounds a bit trivial to some of you (just push it twice, right?), but the vast majority of website visitors prefer a fast and fluid User Experience.

Example of the functionality example before javascript is added

Here’s the Code

Add this code to your ‘Divi Theme Options’ Under ‘Integration’ and then’ADD CODE TO THE < HEAD > OF YOUR BLOG’ section.

<script type="text/javascript">
(function($) {
$(document).ready(function() {

$('.et_pb_video_overlay').click(function() {
var iframe = $(this).prev('.et_pb_video_box').find('iframe'),
iframe_src = $(iframe).attr('src');
$(iframe).attr('src', iframe_src + '&autoplay=1');
});

});
})(jQuery);
</script>

Example of the functionality example after javascript is added

Cory Jenkins

I am an Avid WordPress User/Developer/Blogger since 2007 and Co-Founder of WP Zone. When I am not working on awesome WordPress and Divi stuff, I enjoy hanging out with my family, watching baseball and exploring the great outdoors in our RV.