How to make a video play when you open a modal box using JavaScript?

Question

I've been setting up a video page for my website and I'm trying to make it extra slick by using Javascript!... Unfortunately, I completely suck at Javascript! Ok, so here's my problem:

I've managed to make a modal box with an opening animation using HTML and CSS, now what I want to happen is as soon as I click the video thumbnails the video starts playing and when I click the close button, the video stops playing or pauses, I've managed to make it work using "onclick" commands... but it only works for one video!

I've tried setting up videos with multiple ids and multiple JS vars but none of them work, at some point I made it so all of the videos started playing at once even though I only had one modal box open... lol

Here's a snipet of my current code:

<!-- Open the Lightbox with these images -->
<div class="row">
  <div class="column">
    <img src="tsr/teaserthumbnail.png" onclick="openModal();currentSlide(1);playVid()" class="hover-shadow">
    <img class="play-btn" src="/assets/play-btn.png" onclick="openModal();currentSlide(1);playVid()">
  </div>
  <div class="column">
    <img src="tsr/e3thumbnail.png" onclick="openModal();currentSlide(2);playVid()" class="hover-shadow">
    <img class="play-btn" src="/assets/play-btn.png" onclick="openModal();currentSlide(2);playVid()">
  </div>
</div>

<!-- Modal/Lightbox Content -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal();pauseVid()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <center><video id="myVideo" width="100%" controls src="tsr/TSR_TeaserMovie_PEGI_ENG_1527074582.mp4"></video></center>
    </div>

    <div class="mySlides">
      <center><video id="myVideo" width="100%" controls src="tsr/TSR_E3_Trailer_UK_PEGI_1528474075.mp4"></video></center>
    </div>

<script>
// Open the Modal
var vid = document.getElementById("myVideo");
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function playVid() { 
  vid.play(); 
} 

// Close the Modal
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

function pauseVid() { 
  vid.pause(); 
}

Here's the webpage itself if you need anymore context: https://sonic.retro-media.net/videos/tsr.php

All I really need is for each video to start playing when I click the thumbnail or pause when I close the modal/lightbox.

Thanks in advance!

Answer 1

I figured it out!

The solution was rather simple too, all I had to do to was edit the code to:

<script> 
function playVid(vidID) { 
    var vid = document.getElementById(vidID); 
    vid.play(); 
} 
function pauseVid(vidID) { 
    var vid = document.getElementById(vidID); 
    vid.pause(); 
}
</script>

Now all I had to do was change my video IDs accordingly, in this case 'myVideo1' and 'myVideo2'!

Thank you for your help!

Answer 2

Can you just call playVid() from the openModal() when that function is running?

One solution you can try is to set autoplay=1 when the modal is opened too, that way the video starts playing. You can do the same to stop the video when 'closeModal()' is called by setting autoplay=0.

This is how you would add the autoplay to the current src of the video if it's in an iframe:

vid.src = vid.src + (vid.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';

Here is a more complete version of the code.

var autoplayVideo = function (modal) {

    // Look for a YouTube, Vimeo, or HTML5 video in the modal
    var video = modal.querySelector('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');

    // Bail if the modal doesn't have a video
    if (!video) return;

    // If an HTML5 video, play it
    if (video.tagName.toLowerCase() === 'video') {
        video.play();
        return;
    }

    // Add autoplay to video src
    // video.src: the current video `src` attribute
    // (video.src.indexOf('?') < 0 ? '?' : '&'): if the video.src already has query string parameters, add an "&". Otherwise, add a "?".
    // 'autoplay=1': add the autoplay parameter
    video.src = video.src + (video.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';

};

Now to stop the video when the modal closes:

/**
 * Stop a YouTube, Vimeo, or HTML5 video
 * @param  {Node} modal  The modal to search inside
 */
var stopVideo = function (modal) {

    // Look for a YouTube, Vimeo, or HTML5 video in the modal
    var video = modal.querySelector('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');

    // Bail if the modal doesn't have a video
    if (!video) return;

    // If an HTML5 video, pause it
    if (video.tagName.toLowerCase() === 'video') {
        video.pause();
        return;
    }

    // Remove autoplay from video src
    video.src = video.src.replace('&autoplay=1', '').replace('?autoplay=1', '');

};

Don't forget to expose the button/thumbnail and the modal as arguments

modals.init({
    callbackOpen: function ( toggle, modal ) {
        autoplayVideo(modal);
    },
    callbackClose: function ( toggle, modal ) {
        stopVideo(modal);
    }
});

Let me know if this works!

Cheers!

Answer 3

Firefox - https://support.mozilla.org/en-US/kb/block-autoplay

Chrome - https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

autoplay is going to be turned off (more like, it's already off) by default on all major browsers, unless the user changes the browser autoplay settings.