CODEWITHSUNDEEP
javascriptiframeyoutube
Timba
Timba

Reputation: 97

2 Videos same page using iframe Youtube API only loading one

I am having an issue trying to loading 2 iframe videos with Youtube iframe API.

See the code below: 

<body>
       <div id="bookingVideo"></div>
       <div id="testing"></div>

       <script>
          var tag = document.createElement('script');
          tag.src = "https://www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];          
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

          //First video 
          var bookingVideo;      
          function onYouTubeIframeAPIReady() {
            player = new YT.Player('bookingVideo', {
              height: '400',
              width: '100%',
              videoId: 'W3VoMbg6hXA'
            });
          }

          //Second Video        
          var testing;      
          function onYouTubeIframeAPIReady() {
            player = new YT.Player('testing', {
              height: '400',
              width: '100%',
              videoId: 'W3VoMbg6hXA'
            });
          }    

          function onPlayerReady(event) {
            event.target.playVideo();
          }

          function pauseVideo() {
            player.pauseVideo();
          }                      
       </script>
</body>

Its working but only adding one video to div id="testing" as you can see in the screenshot below.

enter image description here

Any idea? I am getting stuck for a few hours :(. Thanks

Upvotes: 2

Views: 1325

Answers (2)

Aravind S
Aravind S

Reputation: 2395

Here is the script to handle N number of youtube videos

        var ytIframeIdList = [];//Creating Array to store youtube IDs
        var ytPlayerId = [];//Creating Array to store player IDs
        ytIframeIdList =["youtubeID1","youtubeID1","youtubeID1"];//youtube Video IDs

        /*Creating Youtube Player IDs for handling events*/

        for (i = 0; i < ytIframeIdList .length; i++) {
             ytPlayerId.push("player" + i);
        }

        /*Appending youtube API script to body*/

        var youTubeVideoTag = document.createElement('script');
        youTubeVideoTag.src = "//www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        document.body.appendChild(youTubeVideoTag, firstScriptTag);

        window.onYouTubeIframeAPIReady = function () {
            for (i = 0; i < ytIframeIdList.length; i++) {
                ytPlayerId[i] = new YT.Player(ytIframeIdList[i], {
                    events: {
                        "onStateChange": onPlayerStateChange
                    }
                });
            }
        };
        function onPlayerStateChange(event) {
           for (i = 0; i < ytIframeIdList .length; i++) {
               if (ytPlayerId[i].getPlayerState() === 2) {
                     ytPlayerId[i].pauseVideo();//For pause
                }
             }
          }

Thanks !

Upvotes: 3

Tom Piaggio
Tom Piaggio

Reputation: 669

You are defining the same function twice, so Javascript do not know which one to call. You should do the following: 

<body>

    <div id="bookingVideo"></div>

   <div id="testing"></div>

    <script>

      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);




      var bookingVideo;
      var testing;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('bookingVideo', {
          height: '400',
          width: '100%',
          videoId: 'W3VoMbg6hXA'
        });
        player = new YT.Player('testing', {
          height: '400',
          width: '100%',
          videoId: 'W3VoMbg6hXA'
        });
      }


      function onPlayerReady(event) {
        event.target.playVideo();
      }



            function pauseVideo() {
                player.pauseVideo();
            }


    </script>

Hope it helps!

Upvotes: 3

Related Questions