How to embed multiple videos on your webpage?

If you want to embed multiple videos on a single webpage, it happens that videos keep playing while you press play on the second video. Or if you use modals and press the next or previous button, the video stil continuous in the background.

How can you resolve this issue?

Here below we have an example script you can implement on your website.

function stopPlayingEmbedVideo() {
      // Set the scope to a region where to look for iframes
      // otherwise set scope as the entire document
      // var myScope = document;
      // if there is an iframe inside maybe embedded multimedia video/audio, we should reload so it stops playing
      
      /*
      * var videoContainer = a div with id #container.
      * You can rename container id name to any other wrapper div 
      * This is the region where the script looks for all the iframes
      */
      var videoContainer = document.getElementById('container');
      var iframes = videoContainer.getElementsByTagName("iframe");
      
      if (iframes != null) {
          for (var i = 0; i < iframes.length; i++) {
              iframes[i].src = iframes[i].src;
          }
      }
    }

     /*
      * var button = a button with id #stop-playing-btn.
      * You can rename stop-playing-btn to any other id name 
      * This is the button that fires the event to stop playing video
      * You can assign this event to modal closing, next prev for example
      */
    var button = document.getElementById('stop-playing-btn');
    button.addEventListener("click", stopPlayingEmbedVideo);

We have a button in our example that calls the stopPlayingEmbedVideo() function. But you can assign this event on other places like a prev or next button for example.

<div id="container">
    <iframe scrolling="no" frameborder="0" src="example/iframe" width="600" height="400" allowFullScreen="true"></iframe>
    <iframe scrolling="no" frameborder="0" src="example/iframe" width="600" height="400" allowFullScreen="true"></iframe>
  </div>
  <button id="stop-playing-btn">Stop playing</button>