How to automatically play a Video in a Popup

Here's how to automatically play an MP4 video when the popup appears. When closed, the video pauses and resumes from the same point upon reopening.

Step 1: Set Up Your Video Popup

Create your popup and embed your video content. Make sure to assign the ID popupvideo to your popup element for proper functionality.

Enable the muted option for your video.

Step 2: Implement the Code

Place this JavaScript snippet in a Code Block element on the same page where your popup trigger button is located:

// Select the elements
const popupElement = document.querySelector('#popupvideo');
const videoElement = document.querySelector('#popupvideo .ee-video');

// Function to check and control video playback
function checkPopupAndPlayVideo() {
if (popupElement.classList.contains('breakdance-popup-open')) {
videoElement.muted = false; // unmute the video, if there is sound
videoElement.play();
} else {
videoElement.pause();
}
}

// Create a MutationObserver
const observer = new MutationObserver(checkPopupAndPlayVideo);

// Observe changes in the popup element's attributes
observer.observe(popupElement, { attributes: true });

// Initial check on page load
checkPopupAndPlayVideo();

Video with Sound

Notice this line: videoElement.muted = false;
The video may play with sound if available. Compatibility on iOS devices may vary.