JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="video-player"></div>
<div id="video-list"></div>

CSS

body {
    font-family: monospace;
}
.video-wrap {
    position: relative;
    padding-top: 25px;
    padding-bottom: 56.25%;
    background-color: rgba(0, 0, 0, 1);
}
.video-wrap iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
p[data-videoid] {
    width: 44%;
    float: left;
    padding: 3%;
}
p[data-videoid]:nth-child(2n+1) {
    clear: left;
}

JavaScript

/**
 * Video list & player
 */

var _v = [
    'qy_BKKnHgas',
    'msN7HNncHik',
    'YDNmyyrEZho',
    'rksCTVFtjM4'],
    _k = 'AIzaSyAPa7r7RKhBQQ1pAUn5S6qDopy5sfSz7jg';
var vlist = {} || vlist;
vlist.init = function (ids, k) {
    if (typeof ids !== 'undefined') {
        vlist._v = ids;
    } else {
        vlist._v = [];
    }
    if (typeof k === 'undefined') {
        return false;
    }
    vlist._l = false;
    vlist._k = k;
    vlist.pulledData = [];
    vlist.pull();
}
vlist.pull = function () {
    if (vlist._l) {
        return false;
    }
    var idStr = vlist._v.join('%2C');
    var requestUrl = 'https://www.googleapis.com/youtube/v3/videos?part=snippet&maxResults=50&id=' + idStr + '&key=' + vlist._k;
    $.getJSON(
    requestUrl,

    function (data) {
        console.log(data);
        vlist.pulledData = data;
        vlist.renderList();
        vlist._l = true;
    });
}
vlist.renderList = function () {
    if (typeof vlist.pulledData.items !== 'object') {
        return false;
    }
    var items = vlist.pulledData.items;
    if (items.length < 1) {
        return false;
    }
    for (var i = 0; i < items.length; i++) {
        var oStr = '<img src="' + items[i].snippet.thumbnails.
        default.url + '" width="' + items[i].snippet.thumbnails.
        default.width + '" height="' + items[i].snippet.thumbnails.
        default.height + '" /><br />';
        oStr += 'ID: ' + items[i].id + '<br />';
        oStr += 'Title: ' + items[i].snippet.title + '<br />';
        oStr += 'Description: ' + items[i].snippet.description + '<br />';
        $('body').append($('<p/>').html(oStr).addClass('unbound').attr('data-videoid', items[i].id));
    }
    if (typeof vlist.firstRender === 'undefined') {
        vlist.firstRender = vlist.renderPlayer(items[0].id, 1);
    }
    vlist.bindRenderPlayer();
}
vlist.bindRenderPlayer = function () {
    $('[data-videoid].unbound').each(function (i, e) {
        $(e).click(function () {
           ...