This JavaScript code will enable your Divi Video to autoplay when scrolled into view. When scrolled out of view it will reset, and start from the beginning when scrolled back into view, whether scrolled up or down.
It works on both desktop/laptops and mobile devices.
<script>
jQuery(document).ready(function($) {
var $videoBoxes = $('#YOUR-CSS-ID.et_pb_video_box');
if ($videoBoxes.length !== 0) {
$videoBoxes.find('video')
.prop('muted', true)
.prop('loop', true)
.prop('playsInline', true);
// Use IntersectionObserver for efficient scroll detection
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
var video = entry.target.querySelector('video');
if (!video) return;
if (entry.isIntersecting) {
// Video is in view — play it
video.play();
} else {
// Video is out of view — pause and reset to start
video.pause();
video.currentTime = 0;
}
});
}, {
threshold: 0.5 // 50% of the element must be visible to trigger
});
// Attach the observer to each video box
$videoBoxes.each(function() {
observer.observe(this);
});
}
});
</script>
NOTES:
- Replace .YOUR-CSS-ID with a CSS ID of your choice (although a CSS CLASS will work as well)
- Place your CSS-ID in Divi Editor -> Video Settings -> Advanced -> CSS ID & Classes -> CSS ID. Remember: you do not need the hashtag (#) before the CSS ID in the Divi Video Setting.
- Insert this code in Divi → Theme Options → Integrations → Body section
Good luck! ✌🏾😎
Thanks to Victor Duse for the original code, and Claude.ai for the on-scroll update.
