title: How to Stop Playing Multiple Videos on iframe at a time
body: <blockquote>
    <p>This is a index.php file where i write the code to stop playing videos on iframe simultaneously.Which works fine on console but not worked here.I am not get What is the problem where i should call this script.</p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--
  To change this license header, choose License Headers in Project Properties.
  To change this template file, choose Tools | Templates
  and open the template in the editor.
  --&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;youtube Channel Videos&lt;/title&gt;
      &lt;style&gt;
          body{
          background: #f4f4f4;
          font-family: "Arial" sans-serif;
          font-size: 14px;
          color: #666;
          }
          #container{
          width: 800px;
          overflow: auto;
          margin: auto;
          background: #fff;
          padding: 15px;
          }
      &lt;/style&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://www.youtube.com/player_api"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;?php
      // put your code here
      ?&gt;
      &lt;div id="container"&gt;
          &lt;h1&gt;Youtube Videos&lt;/h1&gt;
          &lt;ul id="results"&gt;
  
          &lt;/ul&gt;
  
      &lt;/div&gt;
      &lt;script&gt;
      players = new Array();
  alert($("iframe.yt_players"));
  function onYouTubeIframeAPIReady() {
      var temp = $("iframe.yt_players");    
      for (var i = 0; i &lt; temp.length; i++) {
          var t = new YT.Player($(temp[i]).attr('id'), {
              events: {
                  'onStateChange': onPlayerStateChange
              }
          });
          players.push(t);
      }
  
  }
  onYouTubeIframeAPIReady();
  
  
  function onPlayerStateChange(event) {
  
      if (event.data == YT.PlayerState.PLAYING) {
          var temp = event.target.a.src;
          var tempPlayers = $("iframe.yt_players");
          for (var i = 0; i &lt; players.length; i++) {
              if (players[i].a.src != temp) players[i].stopVideo();
  
          }
      }
  }
      &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>This is a script.js file from where all youtube videos from channel id is listed with total seen information.using youtube data api.</p>
  </blockquote>
  
  <pre><code>    function tplawesome(template, data) {
      // initiate the result to the basic template
      res = template;
      // for each data key, replace the content of the brackets with the data
      for(var i = 0; i &lt; data.length; i++) {
          res = res.replace(/\{\{(.*?)\}\}/g, function(match, j) { // some magic regex
              return data[i][j];
          })
      }
      return res;
  }
  var channelName= "TechGuyWeb";
  $(document).ready(function(){
      $.get("https://www.googleapis.com/youtube/v3/channels",{
      part: 'contentDetails',
      forUsername: channelName,
      key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
      function(data){
      $.each(data.items,function(i, item){
  
          var pid = item.contentDetails.relatedPlaylists.uploads;
          //console.log(pid);     
          getvids(pid);
      });
      }
      );
  //var pid="TechGuyWeb";
  //getvids(pid);
      function getvids(pid){
      $.get("https://www.googleapis.com/youtube/v3/playlistItems",{
      part: 'snippet',
      maxResults: 10,
      playlistId:pid,
      key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
      function(data){
      var output;
      $.each(data.items,function(i, item){
          //console.log(data);
          var v_id = item.snippet.resourceId.videoId;
  
          //alert(item.snippet.resourceId.videoId);
          //var video_title = item.snippet.title;
          //output= '&lt;li&gt;'+video_title+'&lt;/li&gt;';
          $.get("item.html",function(data){
          $('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId}]));
          getcount(v_id);
          });
          //$('#results').append(output);
      });
      }
      );
      }
      function getcount(v_id){
      $.get("https://www.googleapis.com/youtube/v3/videos",{
      part: 'statistics',
      id: v_id,
      key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
      function(data){
      $.each(data.items,function(i, item){
  
          var views = item.statistics.viewCount;
          console.log(views);  
          $('#'+v_id).append(views);
  
      });
      }
      );
      }
  
  });
  </code></pre>
  
  <blockquote>
    <p>Here is the item.html file from where iframe code is written.</p>
  </blockquote>
  
  <pre><code>    &lt;div class="item" &gt;
      &lt;h2&gt;{{title}}&lt;/h2&gt;     
      &lt;iframe id="player{{videoid}}"  class="yt_players" width="640" height="360" src="//www.youtube.com/embed/{{videoid}}?rel=0&amp;wmode=Opaque&amp;enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen onload&gt;&lt;/iframe&gt;
      &lt;div&gt;&lt;h5&gt;Total Views: &lt;span id="{{videoid}}"&gt;&lt;/span&gt;&lt;/h5&gt; &lt;/div&gt;
  &lt;/div
  </code></pre>
  
  <blockquote>
    <p>Please reply me soon if stackoverflow team found the problem in this code.Please set the api key in script.js file to check</p>
  </blockquote>