How do I stop a Google Drive video from playing after closing a modal (with multiple modals, with their own videos on the page)?

  html, iframe, modal-dialog, php

I’d like to preface that I am new to web development, so I apologize, I know this question seems to be out there a lot. I have tried many solutions, but I just can’t seem to get anything to work.

I am working on a webpage that has a series of tutorial videos, each is in their own modal with descriptions. Is there a way I can stop the video from playing upon closing without needing to create ID tags for each video or use bootstrap? (I’m honestly not even sure how to use it, if I’m being honest.) I’ve seen a lot of solutions, but none of them seem directly applicable to my existing code.

<button id="myBtn">Video Title</button>

<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h3>Video Title</h3>
        </div>

        <div class="modal-body">
            <p>
              Video description Prose

              <div class="video-container">
                <iframe class="responsive-iframe" src="https://drive.google.com/file/d/1M-nlvbG_WUuIq-sjHdntgk1VrhdVnKDh/preview" width="950" height="550"></iframe>
              </div>
            </p>
        </div>

        <div class="modal-footer">
            <h3></h3>
        </div>
    </div>
</div>

Here is the corresponding script I’m using at the bottom of the page.

<script>
    var datamap = new Map([
        [document.getElementById("myBtn"), document.getElementById("myModal")],
        [document.getElementById("myBtn1"), document.getElementById("myModal1")],
        [document.getElementById("myBtn2"), document.getElementById("myModal2")],
        [document.getElementById("myBtn3"), document.getElementById("myModal3")],
        [document.getElementById("myBtn4"), document.getElementById("myModal4")],
        [document.getElementById("myBtn5"), document.getElementById("myModal5")],
        [document.getElementById("myBtn6"), document.getElementById("myModal6")],
        [document.getElementById("myBtn7"), document.getElementById("myModal7")]
    ]);

    datamap.forEach((value, key) => {
        doModal(key, value);
    });

    function doModal(anchor, popupbox) {

        // Get the <span> element that closes the modal
        var span = popupbox.getElementsByClassName("close")[0];

        anchor.addEventListener("click", function (event) {
            popupbox.style.display = "block";
        });

        span.addEventListener("click", function (event) {
            popupbox.style.display = "none";
        });

        window.addEventListener("click", function (event) {
            if (event.target == popupbox) {
                popupbox.style.display = "none";
            }

        var 
        });
    }
  </script>

Source: Ask PHP

LEAVE A COMMENT