Using background videos on your website can significantly enhance its visual impact, but ensuring a seamless and professional appearance often requires precise control over playback.
One common issue with the background videos is that they will loop endlessly. Stopping the background video at the last frame provides a smooth transition and a polished look.
This guide will show you the steps to stop your background video at the last frame, ensuring a continuous and visually appealing presentation.
Open the element with a background video set for which you want the background video to open on the last frame of the video
Go to Advanced Tab → CSS ID & Classes → CSS Class and type in stop_bg_video
Go to WordPress Dashboard → Divi → Theme Options → Integrations Tab and paste in this JS code
<script>
(function ($) {
$(document).ready(function () {
$('.stop_bg_video video').each(function () {
$(this).removeAttr('loop');
$(this).mediaelementplayer({
autoRewind: false
});
});
setTimeout(function () {
$(window).trigger('resize');
}, 500);
});
})(jQuery);
</script>
Pro Tip: You can reuse the same CSS class stop_bg_video on as many elements as you need.