Multiple video YouTube API - from data-videoid + control Get Video Title

by fredd man

HTML

<div>
  <button id="pause">Pause all Videos</button>
  <button id="stop">Stop all Videos</button>
</div>
<br>
<div>
  <div class="ytplayer" data-ytid="cLcKew4cQq4"></div>
  <div class="ytplayer" data-ytid="-HjpL-Ns6_A"></div>
  <div class="ytplayer" data-ytid="nfs8NYg7yQM"></div>
</div>

CSS

.ytcontrol {
  margin: 2px 0 30px
}

JavaScript

// Multiple video YouTube API FROM PLAYLIST: 
// http://jsfiddle.net/onigetoc/a9j8829v/
// GET VIDEO INFOs FROM noembed 
// GET VIDEO INFOS FROM Youtube api.
//https: //www.googleapis.com/youtube/v3/videos?part=id%2C+snippet&id=4Y4YSpF6d6w&key=12345

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

function onYouTubeIframeAPIReady() {
  $(".ytplayer").each(function() {

    var videoID = $(this).data('ytid');
    var newvideoID = 'ytid-' + videoID;
    $(this).attr('id', newvideoID);

    //$(this).val(testdata);
    //alert(videoID)
    var curplayer = createPlayer(videoID);
    players[newvideoID] = curplayer;

  });
}

var players = new Array();

function createPlayer(videoID) {

  var url = 'https://www.youtube.com/watch?v=' + videoID;
  // Do not work because of https, need a proxy or yahoo query
  /*
    $.getJSON('//www.youtube.com/oembed', {
      format: 'json',
      url: url
      dataType: "jsonp",
      jsonpCallback: "localJsonpCallback"
    }, function(data) {
  */
  $.getJSON('https://noembed.com/embed', 
  		{format: 'json', url: url}, function(data) {
    //alert(data.title);
     console.log(data.thumbnail_url);

    var thisvideoID = 'ytid-' + videoID;
    //$(this).attr('id', newvideoID);   
    //alert(videoID)

    var ytvid = new YT.Player(thisvideoID, {
      height: 250,
      width: 420,
      videoId: videoID,
      playerVars: {
        autoplay: 0,
        controls: 0,
        showinfo: 0,
        iv_load_policy: 3,
        rel: 0,
        fs: 0,
      }
    });

    var ctrTemplate = '<div id="ytcontrol-' + videoID + '" class="ytcontrol">' + data.title + '<br><a href="#" id="ytplay-' + videoID + '">Play</a> &bull; <a href="#" id="ytpause-' + videoID + '">Pause</a> &bull; <a href="#" id="ytstop-' + videoID + '">Stop</a></div>';

    $("#" +...