Video Modal UsageThere are two options for playing a video in a modal. Both require some custom JavaScript.Option 1: Modal triggers VideoClicking a button calls a modal's show method. Custom JavaScript listens for the event and plays the video when it happens.Demo
Custom JavaScript<script>
// Play the video on modal show, pause on hide
const modal1 = document.querySelector('.js-modal-123');
const video1 = document.querySelector('.js-modal-video-123');
modal1.addEventListener('modal:show', function() {
video1.play();
});
modal1.addEventListener('modal:hide', function() {
video1.pause();
});
</script>Option 2: Video triggers ModalClicking a button calls a video's toggle method. Custom JavaScript listens for the event and opens the modal when it happens.Demo
Custom JavaScript<script>
// Show modal on video toggle, pause on modal hide
const modal2 = document.querySelector('.js-modal-456');
const video2 = document.querySelector('.js-modal-video-456');
video2.addEventListener('playing', function() {
modal2.show();
});
modal2.addEventListener('modal:hide', function() {
video2.pause();
});
</script>Debug Panel