I’m busy working on a Divi site with a background video on the homepage. The default behaviour for Divi background videos is to loop endlessly but, as much as I like background videos, there are some that just don’t loop seamlessly which kind of ruins the effect which, in this case, was what happened. After doing a little Googling, I discovered that there are two ways to stop the video from looping. The first would be to stop the video on the last frame, and the other would be to stop the video and return to the first frame.
Stop on the Last Frame of a Divi Background Video
The first, and probably the best option for videos that don’t loop seamlessly, is to stop them on the last frame.
The Example
In this example, the video plays to the end and stops on the last frame, leaving it on show for all the world to see.
Stop Divi background video on the fast frame.
How To
The first thing you need to do, after adding the background video that is, is to set the class of the Divi row, section, or module, with the background video to stop_bg_video. In this example, I’ve used a video for the background of the row so I add the CSS class name stop_bg_video under to the CSS Class field under the Advanced tab of the row.
Next up, add the following script to either a Divi Code module on the page or to the “Add code to the < head > of your blog”, which you’ll find on the WordPress dashboard under Divi > Theme Options > Integration.
In this example, I’ve added a Divi Code Module to the same row that has the background video.
Stop on the Divi Background Video and Return to the First Frame
Next up, I’ll show you an example where the video ends and then returns to the first frame.
The Example
In this example, the video stops and immediately returns to the first frame. Not a particularly elegant solution, but hey, it might work for you.
Stop Divi background video and return to the first frame.
How To
Okay, so you’ve set the background video, of the Divi row, section, or module. Now head to the Advanced tab and set the CSS Class to no-loop. In this example, I’ve used a video for the background of the row so I add the CSS class name no-loop under to the CSS Class field under the Advanced tab of that row.
Next up, add the following script to either a Divi Code Module on the page or to the “Add code to the < head > of your blog”, which you’ll find on the WordPress dashboard under Divi > Theme Options > Integration.
Here again, I’ve added a Divi Code Module to the row with the background image.
Wrapping it Up
So, that’s how easy it is to stop a background video from looping in Divi. Add that to your toolkit, it might just come in handy.
Photo by Donovan Silva on Unsplash
