**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>
This wasn’t working for me, although on checking again, it appears Divi may now do this by default, as when I removed the code, my Youtube video is playing first time without an additional click.
This does not work on my divi site. Newest version. June 2019…
Any updates on this snippet? Thanks!
Hello just wondering if there is an updated code for this. I tried this in the Theme Options > Integration > Header using a Vimeo video in the Video module on both a Divi and Extra site (current versions). The video clip doesn’t change when you click on the poster image. When I remove the code I can click on the poster image and get a vimeo player that I then have to click play again to play it. Thanks!
Same here and I haven’t found a work around yet.
This code broke my website. Prevented the page from fully loading. On WordPress 4.9.7 with Divi 3.9 child theme.
Hello, I have just checked the code on the latest wordpress and Divi and can’t replicate the breaking site issue… perhaps there is a conflict with other code or a plugin? You are placing the code within Divi Theme options >> Integration > Header?
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?
Just FYI – looks like with the latest Divi 3.0.38 – they implemented the one-click video play functionality…
It seems that they have added it for Youtube but no vimeo.
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);
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.
Does this work for background video?
Thank you.. Crazy helpful.. Since the update there is a download option. Any direction in removing that? Thank you in advance.
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?
Is threr any way to modify the code to work with self-hosted videos
BIG Thank You! That was driving me nuts!
Great! Thanks!
Hey Cory, has anything changed? This code isn’t working for me anymore; followed your directions exactly.
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.
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
…. 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.
(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);
Thanks for this, Cory, works great. I wonder why Elegant Themes doesn’t build this functionality into their module.
Really working!
Many thanks for you guys!!!
Sincerely,
Igor
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!
Not working for me. I use the new snippets, without the shortcode. Bummer.
Hi Paul, are you using videos hosted by YouTube or Vimeo? This code will not work if the videos are self hosted.
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/
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
can’t get this to work: latest Divi, added the code into header box but nothing changed to the vids on site
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
Bump for previous comment, doesn´t work for me either.
Is this working for any post type?
Thanks in advance.
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
Oh man, a big thank you!!
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