title: Display Published Date from YouTube Video
body: <p>[UPDATED]
  I have two HTML pages i.e. index.html and player.html. On index.html, I have loaded multiple playlists so that when the user clicks on any video it opens player.html in a new tab and load the video in YouTube Player.</p>
  
  <p>The problem is that on player.html, I have succeed to get the Video Title in a div but I am not sure how can I add Published Date and Category Name.</p>
  
  <p>I am getting the following errors in Console:</p>
  
  <p>Uncaught TypeError: Cannot read property 'length' of undefined</p>
  
  <p>at Function.each (jquery.min.js:2)</p>
  
  <p>at window.onload (player.html?vid=Un5SEJ8MyPc:50)</p>
  
  <p>each @ jquery.min.js:2</p>
  
  <p>window.onload @ player.html?vid=Un5SEJ8MyPc:50</p>
  
  <p>load (async)</p>
  
  <p>(anonymous) @ player.html?vid=Un5SEJ8MyPc:28</p>
  
  <p>Here is my HTMLs:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;section id="programs"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm-8"&gt;
          &lt;h3&gt;Banking&lt;/h3&gt;
              &lt;div id="youtube-playlist-feed_1"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;div class="row"&gt;
              &lt;h3&gt;Sponsors&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;section id="programs"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm-8"&gt;
          &lt;h3&gt;Business&lt;/h3&gt;
              &lt;div id="youtube-playlist-feed_2"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;div class="row"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>player.html</p>
  
  <pre><code>&lt;div id="vtitle"&gt;&lt;/div&gt;
  &lt;div id="display"&gt;&lt;/div&gt;
  &lt;div id="published"&gt;&lt;/div&gt;
  &lt;div id="category"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
                  window.onload = function () {
                  var url = document.location.href,
                      params = url.split('?')[1].split('&amp;'),
                      data = {}, tmp;
                  for (var i = 0, l = params.length; i &lt; l; i++) {
                       tmp = params[i].split('=');
                       data[tmp[0]] = tmp[1];
                  }   
                   var videoId = data.vid;
                   var output = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/'+videoId+'"&gt;&lt;/iframe&gt;';
                   document.getElementById('display').innerHTML = output;
  
                   var id = videoId;
                   var url = 'https://www.youtube.com/watch?v=' + id;
  
                   $.getJSON('https://noembed.com/embed',
                   {format: 'json', url: url}, function (data) {
                   document.getElementById('vtitle').innerHTML=(data.title);
  
  
              });
  
                  $.each(data.items, function(i, item) {
                        console.log(item)
                    var videoID = item['snippet']['resourceId']['videoId'];
                    var title = item['snippet']['title'];
                    var url = 'https://www.youtube.com/watch?v=' + videoID;
                    var output = 'Hi';
  
                    document.getElementById('published').innerHTML = output;
                    });
              }
  
              &lt;/script&gt;
  </code></pre>
  
  <p>script.js</p>
  
  <pre><code>            var htmlString = "";
              var apiKey = 'AIzaSyA7dAzzNvPCxTSsSGiV7dvoj3rkt0qbdXg';
              var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
              var maxResults = 7;
  
              var playlists = [{
                  playlistId: 'PLJYHm_ZxWCKnQmapkDs7x47jkr-nw3l50',
                  el: '#youtube-playlist-feed_1'
                },
                {
                  playlistId: 'PLJYHm_ZxWCKmIBkoopKFK4kTTOmC1Zof0',
                  el: '#youtube-playlist-feed_2'
                },
                {
                  playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An',
                  el: '#youtube-playlist-feed_3'
                }
              ];
  
              playlists.forEach(function(playlist) {
                getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
              })
  
              function getVideoFeedByPlaylistId(playlistId, el) {
                $.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&amp;playlistId=' + playlistId + '&amp;part=snippet&amp;maxResults=' + (maxResults &gt; 3 ? 3 : maxResults), function(data) {
                  $.each(data.items, function(i, item) {
                    var videoID = item['snippet']['resourceId']['videoId'];
                    var title = item['snippet']['title'];
                    var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&amp;list=' + playlistID + '&amp;index=1';
                    htmlString += '&lt;div class="video-wrap"&gt;&lt;div class="video"&gt;&lt;a target="_blank" href="player.html?vid='+videoID+'" &gt;&lt;img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"&gt;&lt;/a&gt;&lt;/div&gt;' + '&lt;div class="title"&gt;&lt;a target="_blank" id="player" href="player.html?vid='+videoID+'"&gt;' + title + '&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;';
  
  
                  });
                  $(el).html(htmlString);
  
                  htmlString = '';
                });
              }
  </code></pre>