My goal is to have an MP4 autoplay and loop when in viewport [closed]

I'm building a website and am new to coding. I'm using the newest version of Divi for WordPress and can't get an MP4 to autoplay when in viewport and loop.

This is the video HTML:

<figure class="wp-block-video"> <video controls src="https://candidselflove.com/wp-content/uploads/2025/11/Untitled-1-1.mp4"> </video> </figure>

I've been trying to figure out the JavaScript intersection observer for hours.

EDIT TO QUESTION: Sorry for the lack of clarity, it's my first time on here and first time editing on the front-end. I'm creating a webpage on Divi. I have a video that I want to begin playing automatically when it's in the user's viewport. Currently, when I attempt to run the code for JavaScript, either the dimensions of the video change, and it becomes really small or large, followed by the broken code. If that doesn't happen then the video doesn't show up at all. I'm trying to edit AI generated base to get the functionality, the original post has the original HTML for the video.

// Select all video elements on the page const videos = document.querySelectorAll('video'); // Options for the Intersection Observer const options = { // Use the viewport as the root root: null, // No margin around the root rootMargin: '0px', // Trigger when 50% of the video is visible threshold: 0.5 }; // Callback function to execute when intersection changes const callback = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // If the video is intersecting (in view), play it entry.target.play(); } else { // If the video is not intersecting (out of view), pause it entry.target.pause(); } }); }; // Create a new Intersection Observer const observer = new IntersectionObserver(callback, options); // Observe each video element videos.forEach(video => { // Mute the video to allow autoplay without user interaction in some browsers video.muted = true; observer.observe(video); });