Background videos add motion and visual impact, but by default they loop endlessly.
If you'd rather have the video play once and freeze on its final frame, you can do that in Divi 5 with a reusable CSS class and a short script.
This guide walks you through both steps. It's written for Divi 5 users who are comfortable in WordPress but don't need to write any code themselves.
Before you begin
Make sure the element you want to control already has a background video set. You add one through the Background option group on the Content tab, using the Video background type. This works on any element that supports a background video, such as a section, row, column, or module.
Add a CSS class to the element
In Divi 5, you attach a custom class through the Attributes option group rather than a dedicated CSS class field. Here's how:
Open the settings for the element that has the background video.
Go to the Advanced tab and open the Attributes option group.
Click + Add Attribute.
Choose the class option.
Set the Target Element to the module (this is the usual choice).
In the Attribute Value field, type stop_bg_video.
![Screenshot: the Attributes option group on the Advanced tab with class set to stop_bg_video]
💡Pro tip: You can reuse the same stop_bg_video class on as many elements as you like. Any element carrying it will stop on its last frame.
Add the script
The class on its own doesn't change playback - it's a hook for the script that does the work. Add the script once, and it applies site-wide to every element using the class.
Go to Divi → Theme Options → Integrations in your WordPress dashboard.
Paste the script into the Head code field.
Save your changes.
<script>
(function ($) {
$(document).ready(function () {
$('.stop_bg_video video').each(function () {
var video = this;
video.removeAttribute('loop');
video.addEventListener('loadedmetadata', function () {
var pause_at = video.duration - 0.5;
video.addEventListener('playing', function () {
var interval = setInterval(function () {
if (video.currentTime >= pause_at) {
video.pause();
clearInterval(interval);
}
}, 150);
}, false);
});
});
setTimeout(function () {
$(window).trigger('resize');
}, 500);
});
})(jQuery);
</script>
You're done
Reload the page on the front end. The background video now plays through once and holds on its final frame instead of looping. To apply it elsewhere, add the same stop_bg_video class to another element - no extra script needed.