JSFiddle - React, Tailwind, and code Playground

by Bertrand Martel

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.7/bluebird.core.min.js"></script>
<section id="video-container"></section>

CSS

section {
  font-size: 0;
  max-width: 300px;
  width: 100%;
  margin: auto;
}

section div {
  display: inline-block;
  vertical-align: top;
}

section div:nth-child(4n) {
  margin-bottom: 40px;
}

section div {
  width: 50%;
  float: left;
}

section div img {
  border: 0;
  width: 100%;
  display: block;
  max-width: 100%;
}

section div:first-child iframe {
  height: 500px;
}

JavaScript

/* 
*
Both 'googleApiClient' and 'googleApiKey' functions aren't really necessary. You could simple include this:
<script src="https://www.googleapis.com/youtube/v3/search?key={your_key_here}&channelId={channel_id_here}&part=snippet,id&order=date&maxResults=10><//script> 
before </body>" 
*
*/
var playlists = ['PLsvYuSgEtSsLaXnw9Hwas7aCjJdm27NZE', 'PLsvYuSgEtSsKmcZZqIrjuU8qOjTryuRrX', 'PLsvYuSgEtSsIhaVfKWH6UPmNHZZoUqfgc']
  //Create script to google api
function googleApiClient() {
  var script = document.createElement('script');
  script.src = "https://apis.google.com/js/client.js?onload=googleApiKey";
  document.getElementsByTagName('body')[0].appendChild(script);
}

var promiseFor = Promise.method(function(condition, action, value) {
  if (!condition(value)) return value;
  return action(value).then(promiseFor.bind(null, condition, action));
});

//Load and grant access to youtube api
function googleApiKey() {
  //Put your Api Key here
  var apiKey = 'AIzaSyAhrmf2jcNL8FqtYjXjeAT7_jmdtoMCHJo';
  gapi.client.setApiKey(apiKey);
  gapi.client.load('youtube', 'v3', function() {

    promiseFor(function(count) {
      return count < playlists.length;
    }, function(count) {
      return requestVideo(playlists[count])
        .then(function(response) {
          for (var j = 0; j < response.items.length; j++) {
            showVideo(response.items[j]);
          }
          return ++count;
        }, function(error) {
          console.log(response.error.message);
        });
    }, 0).then(console.log.bind(console, 'all done'));
  });
}

function requestVideo(playlist) {

  return new Promise(function(resolve, reject) {

    var request = gapi.client.youtube.playlistItems.list({
      part: 'snippet',
      playlistId: playlist,
      maxResults: 4
    });

    console.log('myOrder:' + playlist);
    request.execute(function(response) {

      console.log('apiOrder:' + playlist);

      if ('error' in response) {
        reject(Error(response.error.message));
     ...