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-bolt-modal--demo-1');
const video1 = document.querySelector('.js-bolt-video--demo-1');
modal1.addEventListener('modal:show', function() {
videojs.getPlayer(video1).play();
});
modal1.addEventListener('modal:hide', function() {
videojs.getPlayer(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-bolt-modal--demo-2');
const video2 = document.querySelector('.js-bolt-video--demo-2');
const button2 = document.querySelector('.js-bolt-button--demo-2');
button2.addEventListener('click', function() {
videojs.getPlayer(video2).on('playing', function() {
modal2.show();
});
modal2.addEventListener('modal:hide', function() {
videojs.getPlayer(video2).pause();
});
videojs.getPlayer(video2).play();
})
</script>