JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="yt_video_description"></div>

JavaScript

var getJSON = function(url, successHandler, errorHandler) {
  var xhr = new XMLHttpRequest();
  xhr.open('get', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      successHandler && successHandler(xhr.response);
    } else {
      errorHandler && errorHandler(status);
    }
  };
  xhr.send();
};

var __video_id = '0UVj_1ABw6U';

getJSON('http://gdata.youtube.com/feeds/api/videos/' + __video_id + '?v=2&alt=jsonc', function(data) {
    
   
    
  var __date = data.data.uploaded,
      locale = "en-us",
      month = __date.toLocaleString(locale, { month: "long" }),
      __new_date = new Date(Date.parse(__date.replace(/ *\(.*\)/,""))),
      __date_format = __new_date.toLocaleString(locale, { month: "short" }) + " " + __new_date.getDate() + ", " + __new_date.getFullYear();
                        
                        document.getElementById('yt_video_description').innerHTML = 
                                '<span class="yt_text_description"><b>Description:</b><p>' +
                                    data.data.description + '</p>' +
                                '<span class="yt_number_views_video"><b>Views: </b>' +
                                    data.data.viewCount + '</span></br>' +
                                '<span class="yt_video_uploader"><b>Author: </b>' +
                                    data.data.uploader + '</span></br>' +
                                 '<span class="yt_video_published"><b>Uploaded on: </b>' +
                                    __date_format + '</span></span>';
});