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 a an Avid WordPress User/Developer/Blogger and Co-Founder of Aspen Grove Studios. When I am not designing awesome stuff, I enjoy hanging out with my family, watching baseball and exploring the great outdoors.

Previous post
Next post

28 Comments

  1. Christopher Schanz-Surié

    Thats very interesting – thank you.
    Since I am new to divi I did not really understand where exactly to insert that code.
    Please give me some advice.
    Thank you.

    Happy Easter from Germany,
    Chris

    Reply
  2. edurramos

    Bump for previous comment, doesn´t work for me either.
    Is this working for any post type?
    Thanks in advance.

    Reply
    • Cory Jenkins

      sorry for any trouble with this snippet… Our syntax highlighter plugin stopped working, so some shortcode was displaying, which may have caused the code to not function properly. For now the shortcode has been removed, so the code displaying should now work

  3. Guido

    can’t get this to work: latest Divi, added the code into header box but nothing changed to the vids on site

    Reply
    • Cory Jenkins

      Hello Guido, sorry for any trouble with this snippet… Our syntax highlighter plugin stopped working, so some shortcode was displaying, which may have caused the code to not function properly. For now the shortcode has been removed, so the code displaying should now work

  4. Dominic de Souza

    this is a fantastic concept. It really should be default functionality. So I added it to my site here, and it’s not working? Your snippet is in the header area of Integrations in epanel, and it’s for a vimeo video. https://s569109277.onlinehome.us/

    Reply
    • Cory Jenkins

      Hello Dominic, sorry for any trouble with this snippet… Our syntax highlighter plugin stopped working, so some shortcode was displaying, which may have caused the code to not function properly. For now the shortcode has been removed, so the code displaying should now work

  5. Paul

    Not working for me. I use the new snippets, without the shortcode. Bummer.

    Reply
    • Cory Jenkins

      Hi Paul, are you using videos hosted by YouTube or Vimeo? This code will not work if the videos are self hosted.

  6. Marcus Badgley

    Wow! My client’s site just went live and this issue came up when his team started poking around to make sure everything was working as expected. Not being a programmer I wasn’t sure how to solve this issue but had a sense that javascript was the solution. I landed on your site, pasted in the code and the video works perfectly ( https://eversmarts.com/about-gip/). Thanks!

    Reply
  7. Igor

    Really working!

    Many thanks for you guys!!!

    Sincerely,
    Igor

    Reply
  8. Daniel Faux-Burhans

    Thanks for this, Cory, works great. I wonder why Elegant Themes doesn’t build this functionality into their module.

    Reply
  9. Nicolas

    Thanks – BUT 🙁

    One slight hick-up on slider video module. When you select another video the previous video reloads and starts playing again. Selecting the new video merely cause both videos to play over one another. There needs to be some way to halt the previous video. This is NOT an issue if it’s just a single video.

    I tried commenting out the script to see if it still happened without it but nothing happened so it’s definitely an issue with the script

    Reply
    • Nicolas

      …. For this type of scenario I find it’s just easier to cycle through all video under .et_pb_video_overlay and set autoplay to off or stop all video before executing your call that sets the clicked video to play….. but I’m not sure how to do that yet in this case.

    • Nicolas

      (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’);

      //****This attaches a click function to set the autoplay back to zero****//
      $(‘.et_pb_carousel_item’).click(function(){
      $(iframe).attr(‘src’, iframe_src + ‘&autoplay=0’);
      });
      });
      });
      })(jQuery);

  10. Ben Wood

    Thanks Cory. This is great. It works perfectly on a desktop browser – can you think of any reason why it doesn’t work on a mobile phone browser?

    Thanks, Ben Wood.

    Reply
  11. Dominic de Souza

    Hey Cory, has anything changed? This code isn’t working for me anymore; followed your directions exactly.

    Reply
  12. alexsoundmaster

    Great! Thanks!

    Reply
  13. Aleshia

    BIG Thank You! That was driving me nuts!

    Reply
  14. Eric

    Is threr any way to modify the code to work with self-hosted videos

    Reply
  15. Karla Fouts

    Thank you.. Crazy helpful.. Since the update there is a download option. Any direction in removing that? Thank you in advance.

    Reply
    • Cory Jenkins

      Hi Karla, can you please elaborate on the download option as I am not seeing that? Are you sure that is not a browser extension you have installed?

  16. KJentzen

    Does this work for background video?

    Reply
  17. John Stavola

    Almost works… not sure if its a Divi 3.0+ problem but the video overlay dosn’t go away when clicked and the video starts playing behind the video overlay.

    Reply
  18. John Stavola

    Here is the updated code for the latest version of Divi – 3.0 – I added a line to hide the video overlay when clicked.

    (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&rel=0’); //****Added youTube rel=0 argument to hide related videos after video finishesplaying ****//
    $(‘.et_pb_video_overlay’).css(‘display’,’none’); //****This hides the overlay ****//
    });

    });
    })(jQuery);

    Reply
  19. John Stavola

    Just FYI – looks like with the latest Divi 3.0.38 – they implemented the one-click video play functionality…

    Reply
  20. Yale Wishnick

    I want to place a comment section under a video. Not linked to a blog at all. I just want users able to comment about the video. How do I do this?

    Reply

Submit a Comment

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