Playing one YouTube video at a time

Question

What would I adjust in this code so that only one video is able to play at a time? Setting it up so that if I click on another video, the video before it will pause? This is something I've been trying to do and can't seem to figure out how to.

How would this be done? What piece of code would I add to it for this functionality to occur?

Code

https://jsfiddle.net/d72Lp43v/293/

const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(50); // percent
  }

  function onPlayerStateChange(event) {

  }

  function addVideo(video, desiredPlayerVars) {
    const videoId = video.getAttribute("data-id");
    const defaultPlayerVars = {
      autoplay: 1,
      controls: 1,
      showinfo: 1,
      rel: 0,
      iv_load_policy: 3,
      cc_load_policy: 0,
      fs: 0,
      disablekb: 1
    };
    const playerVars = Object.assign(defaultPlayerVars, desiredPlayerVars);
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      // defaultPlayerVars,
      playerVars,
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }
  let apiIsReady = false;
  let timer;
  window.onYouTubePlayerAPIReady = function() {
    apiIsReady = true;
  };
  // function init(video) {
  function init(opts) {
    loadPlayer();
    timer = setInterval(function checkAPIReady() {
      if (apiIsReady) {
        timer = clearInterval(timer);
        addVideo(opts.video, opts.playerVars || {});
      }
    }, 100);
  }
  return {
    init
  };
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 900,
        end: 1200
      }
    });
  }
  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playb");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playc");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playd");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playe");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playf");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playg");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playh");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playi");
  cover.addEventListener("click", coverClickHandler);
}());

Answer 1

One video at a time is quite tricky but easy...

Even I faced the same problem few days ago, while I was working on my video carousel... Finally, I have a solution to it right now... First of all use <iframe> tag for embedding youtube videos and type the following in the end of the video's url ?html5=1&enablejsapi=1... Then include the following JavaScript code directly in your project without any editing to it!!

The JavaScript code for the required function is as follows-

      <script>
    var ytplayerList;

    function onPlayerReady(e) {
        var video_data = e.target.getVideoData(),
            label = video_data.video_id+':'+video_data.title;
        e.target.ulabel = label;
        console.log(label + " is ready!");

    }
    function onPlayerError(e) {
        console.log('[onPlayerError]');
    }
    function onPlayerStateChange(e) {
        var label = e.target.ulabel;
        if (e["data"] == YT.PlayerState.PLAYING) {
            console.log({
                event: "youtube",
                action: "play:"+e.target.getPlaybackQuality(),
                label: label
            });
            //if one video is play then pause other
            pauseOthersYoutubes(e.target);
        }
        if (e["data"] == YT.PlayerState.PAUSED) {
            console.log({
                event: "youtube",
                action: "pause:"+e.target.getPlaybackQuality(),
                label: label
            });
        }
        if (e["data"] == YT.PlayerState.ENDED) {
            console.log({
                event: "youtube",
                action: "end",
                label: label
            });
        }
        //track number of buffering and quality of video
        if (e["data"] == YT.PlayerState.BUFFERING) {
            e.target.uBufferingCount?++e.target.uBufferingCount:e.target.uBufferingCount=1; 
            console.log({
                event: "youtube",
                action: "buffering["+e.target.uBufferingCount+"]:"+e.target.getPlaybackQuality(),
                label: label
            });
            //if one video is play then pause other, this is needed because at start video is in buffered state and start playing without go to playing state
            if( YT.PlayerState.UNSTARTED ==  e.target.uLastPlayerState ){
                pauseOthersYoutubes(e.target);
            }
        }
        //last action keep stage in uLastPlayerState
        if( e.data != e.target.uLastPlayerState ) {
            console.log(label + ":state change from " + e.target.uLastPlayerState + " to " + e.data);
            e.target.uLastPlayerState = e.data;
        }
    }
    function initYoutubePlayers(){
        ytplayerList = null; //reset
        ytplayerList = []; //create new array to hold youtube player
        for (var e = document.getElementsByTagName("iframe"), x = e.length; x-- ;) {
            if (/youtube.com\/embed/.test(e[x].src)) {
                ytplayerList.push(initYoutubePlayer(e[x]));
                console.log("create a Youtube player successfully");
            }
        }

    }
    function pauseOthersYoutubes( currentPlayer ) {
        if (!currentPlayer) return;
        for (var i = ytplayerList.length; i-- ;){
            if( ytplayerList[i] && (ytplayerList[i] != currentPlayer) ){
                ytplayerList[i].pauseVideo();
            }
        }  
    }
    //init a youtube iframe
    function initYoutubePlayer(ytiframe){
        console.log("have youtube iframe");
        var ytp = new YT.Player(ytiframe, {
            events: {
                onStateChange: onPlayerStateChange,
                onError: onPlayerError,
                onReady: onPlayerReady
            }
        });
        ytiframe.ytp = ytp;
        return ytp;
    }
    function onYouTubeIframeAPIReady() {
        console.log("YouTubeIframeAPI is ready");
        initYoutubePlayers();
    }
    var tag = document.createElement('script');
    //use https when loading script and youtube iframe src since if user is logging in youtube the youtube src will switch to https.
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    

  </script>

I will recommend you to include it in the HTML page itself...

Following is the live example of the solution!!!

/*javascipt for the following slider*/
/* Create an array to hold the different image positions */
      var itemPositions = [];
      var numberOfItems = $('#scroller .item').length;
      
      /* Assign each array element a CSS class based on its initial position */
      function assignPositions() {
        for (var i = 0; i < numberOfItems; i++) {
          if (i === 0) {
            itemPositions[i] = 'left-hidden';
          } else if (i === 1) {
            itemPositions[i] = 'left';
          } else if (i === 2) {
            itemPositions[i] = 'middle';
          } else if (i === 3) {
            itemPositions[i] = 'right';
          } else {
            itemPositions[i] = 'right-hidden';
          }
        }
        /* Add each class to the corresponding element */
        $('#scroller .item').each(function(index) {
          $(this).addClass(itemPositions[index]);
        });
      }
      
      /* To scroll, we shift the array values by one place and reapply the classes to the images */
      function scroll(direction) {
        if (direction === 'prev') {
          itemPositions.push(itemPositions.shift());
        } else if (direction === 'next') {
          itemPositions.unshift(itemPositions.pop());
        }
        $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {
          $(this).addClass(itemPositions[index]);
        });
      }
      
      /* Do all this when the DOMs ready */
      $(document).ready(function() {
      
        assignPositions();
        var autoScroll = window.setInterval("scroll('next')", 4000);
      
        /* Hover behaviours */
        $('#scroller').hover(function() {
          window.clearInterval(autoScroll);
          $('.nav').stop(true, true).fadeIn(200);
        }, function() {
          $('.nav').stop(true, true).fadeOut(200);
        });
      
        /* Click behaviours */
        $('.prev').click(function() {
          scroll('prev');
        });
        $('.next').click(function() {
          scroll('next');
        });
      
      });

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100vw;
  user-select: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

.carousel {
  background-image: url(carousel1.jpg);
  width: 100vw;
  height: 52.5vw;
  background-size: 100vw 52.5vw;
}

#scroller {
  position: absolute;
  top: 12vw;
  left: 25vw;
  width: 50vw;
  height: 28vw;
  margin: 0 auto;
  padding: 0;
  -webkit-perspective: 40vw;
  -moz-perspective: 50vw;
  -o-perspective: 50vw;
}

#scroller .item {
  width: 50vw;
  height: 28vw;
  display: block;
  position: absolute;
  border-radius: 1vw;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15)));
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  z-index: 0;
}
/* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */

#scroller .item .youtube-video {
  display: block;
  border-radius: 1vw;
}

#scroller .left {
  pointer-events: none;
  -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
}

#scroller .middle {
  z-index: 1;
  -webkit-transform: rotateY(0deg) translateX(0) scale(1);
  -moz-transform: rotateY(0deg) translateX(0) scale(1);
  -o-transform: rotateY(0deg) translateX(0) scale(1);
}

#scroller .right {
  pointer-events: none;
  -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
}

#scroller .left-hidden {
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
}

#scroller .right-hidden {
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
}

.nav {
  position: absolute;
  width: 50vw;
  height: 2vw;
  margin: 14vw 0 0;
  z-index: 2;
  display: none;
}

.prev,
.next {
  position: absolute;
  display: block;
  height: 2vw;
  width: 2vw;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 2vw;
  color: #1d1919;
  bottom: 20px;
  font-size: 2vw;
  text-align: center;
  line-height: 1.5vw;
  cursor: pointer;
  border: 2px solid #000;
}

.prev {
  left: 1vw;
}

.next {
  left: inherit;
  right: 1vw;
}

.prev:hover,
.next:hover {
  border: 0.01vw solid #000;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">    
    <link rel="stylesheet" type="text/css" href="index1.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Load font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>Gully Ball - carousel</title>
    <link rel="icon" href="logo.png" type="image/jpg" sizes="18x18">

  </head>
  <body>
    <div class="carousel">
      <div class="slideshow-container" id="scroller">
  
        <div class="nav">
          <a class="prev">&laquo;</a>
          <a class="next">&raquo;</a>
        </div>
  
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/xOiVl3qaFkw?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/keTYvc-xU64?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div> 
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/ejlFMXU_Lg0?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/73f3QPsm80Y?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/z3L8EqCb958?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/uKkFIjsLVOo?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/W4gVYFMBU88?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/EsU5tKG4rxk?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/DyI57PYkmDA?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/CbZpZpUb_5A?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/yfOsin7OcA0?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/6cJcfVv35oU?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/lTwl7UQN_CQ?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/Sc77-58rtlI?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/GbN5LBNAYMY?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/UYNwSeupjUM?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>  
      <script>
        var ytplayerList;

        function onPlayerReady(e) {
            var video_data = e.target.getVideoData(),
                label = video_data.video_id+':'+video_data.title;
            e.target.ulabel = label;
            console.log(label + " is ready!");
         
        }
        function onPlayerError(e) {
            console.log('[onPlayerError]');
        }
        function onPlayerStateChange(e) {
            var label = e.target.ulabel;
            if (e["data"] == YT.PlayerState.PLAYING) {
                console.log({
                    event: "youtube",
                    action: "play:"+e.target.getPlaybackQuality(),
                    label: label
                });
                //if one video is play then pause other
                pauseOthersYoutubes(e.target);
            }
            if (e["data"] == YT.PlayerState.PAUSED) {
                console.log({
                    event: "youtube",
                    action: "pause:"+e.target.getPlaybackQuality(),
                    label: label
                });
            }
            if (e["data"] == YT.PlayerState.ENDED) {
                console.log({
                    event: "youtube",
                    action: "end",
                    label: label
                });
            }
            //track number of buffering and quality of video
            if (e["data"] == YT.PlayerState.BUFFERING) {
                e.target.uBufferingCount?++e.target.uBufferingCount:e.target.uBufferingCount=1; 
                console.log({
                    event: "youtube",
                    action: "buffering["+e.target.uBufferingCount+"]:"+e.target.getPlaybackQuality(),
                    label: label
                });
                //if one video is play then pause other, this is needed because at start video is in buffered state and start playing without go to playing state
                if( YT.PlayerState.UNSTARTED ==  e.target.uLastPlayerState ){
                    pauseOthersYoutubes(e.target);
                }
            }
            //last action keep stage in uLastPlayerState
            if( e.data != e.target.uLastPlayerState ) {
                console.log(label + ":state change from " + e.target.uLastPlayerState + " to " + e.data);
                e.target.uLastPlayerState = e.data;
            }
        }
        function initYoutubePlayers(){
            ytplayerList = null; //reset
            ytplayerList = []; //create new array to hold youtube player
            for (var e = document.getElementsByTagName("iframe"), x = e.length; x-- ;) {
                if (/youtube.com\/embed/.test(e[x].src)) {
                    ytplayerList.push(initYoutubePlayer(e[x]));
                    console.log("create a Youtube player successfully");
                }
            }
            
        }
        function pauseOthersYoutubes( currentPlayer ) {
            if (!currentPlayer) return;
            for (var i = ytplayerList.length; i-- ;){
                if( ytplayerList[i] && (ytplayerList[i] != currentPlayer) ){
                    ytplayerList[i].pauseVideo();
                }
            }  
        }
        //init a youtube iframe
        function initYoutubePlayer(ytiframe){
            console.log("have youtube iframe");
            var ytp = new YT.Player(ytiframe, {
                events: {
                    onStateChange: onPlayerStateChange,
                    onError: onPlayerError,
                    onReady: onPlayerReady
                }
            });
            ytiframe.ytp = ytp;
            return ytp;
        }
        function onYouTubeIframeAPIReady() {
            console.log("YouTubeIframeAPI is ready");
            initYoutubePlayers();
        }
        var tag = document.createElement('script');
        //use https when loading script and youtube iframe src since if user is logging in youtube the youtube src will switch to https.
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    
                
      </script>
  </body>
</html>

Have a nice day!!
Regards,
Om Chaudhary

Answer 2

This jsfiddle example demonstrates how to play one video and pause another without having to loop through every video. I use the iframe tag to display videos but this logic can also be applied when using javascript to initialize videos.

var currentPlayer;
var autopaused;
var pnWelwegrNfQ;
var p9HfzcqeS2SU;
var pjDV5q37rGlg;
function onYouTubeIframeAPIReady() {
    pnWelwegrNfQ = new YT.Player('pnWelwegrNfQ', {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    p9HfzcqeS2SU = new YT.Player('p9HfzcqeS2SU', {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    pjDV5q37rGlg = new YT.Player('pjDV5q37rGlg', {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
}
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PAUSED && currentPlayer != undefined && event.target == currentPlayer) {
        autopaused = undefined;
        currentPlayer = undefined;
    } else if (event.data == YT.PlayerState.PAUSED && autopaused != undefined && (event.target == autopaused && event.target != currentPlayer)) {
        autopaused = undefined;
    } else if (event.data == YT.PlayerState.PLAYING && event.target != autopaused) {
        autopaused = currentPlayer;
        if (autopaused != undefined) {
            currentPlayer = event.target;
            autopaused.pauseVideo();
        } else {
            currentPlayer = event.target;
        }
    } else if (autopaused != undefined && event.target == autopaused) {
        autopaused = undefined;
    }
}

Answer 3

You can try to implement your code something like this:

 <div id="player1"></div>
 <div id="player2"></div>
 <!-- add as many as you need -->
 <script>
   var tag = document.createElement('script');
   tag.src = "//www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player={};
function onYouTubeIframeAPIReady() {
    player.player1 = new YT.Player('player1', {
        height: '293',
        width: '520',
        videoId: 'zXV8GMSc5Vg',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
    player.player2 = new YT.Player('player2', {
        height: '293',
        width: '520',
        videoId: 'LTy0TzA_4DQ',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });

}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        pauseVideos(event.target.a.id); 
    }
}

function pauseVideos(player_id) {
    for (p in player) {
        if (p!==player_id) {
          player[p].pauseVideo(); // all videos will pause playing except the one that triggered the event
        }
    }
}
</script>

You just need to set name for each player to have their own identity so that if there's a condition, this can be easily implemented. I understand that you just want to have a dynamic call for your player but this would be difficult if you want to have a condition like this. Try to change your code according to this. I've actually tried to implemented this on onPlayerStateChange() but due to same player name for event.target, I can't formulate a proper condition. Hope this helps!