JSFiddle - React, Tailwind, and code Playground

by rowntreerob

HTML

<div id="player"></div>

CSS

#player {
        width: 600px;
        height: 560px;
        overflow: hidden;
        background: white;
        position: relative;
        border: solid 2px gray;
        padding: 2px;
    }
    .youtube .carousel {
        width: 230px;
        height: 100%;
        overflow: auto;
        position: absolute;
        right: 0px;
        z-index: 3;
    }
    .youtube .thumbnail {
        margin: 2px;
        width: 100px;
        border: 1px solid black;
    }
    .youtube iframe.player {
        width: 362px;
        height: 560px;
        overflow: auto;
        border: 0;
    }
    .yt-descript {
        color: #000;
        display:block;
        height:100px;
    }
    .carItemContain {
        width:;
        height:100px;
    }

JavaScript

(function () {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no">');
            ifr.addClass('player');
        }
        var src = 'http://www.youtube.com/embed/' + video.id;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src += k + '=' + options.playopts[k] + '&';
            }
            src += '_a=b';
        }
        ifr.attr('src', src);
        jqe.append(ifr);
    }

    function createCarousel(jqe, videos, options) {
        var car = $('div.carousel', jqe);
        if (car.length === 0) {
            car = $('<div>');
            car.addClass('carousel');
            jqe.append(car);

        }
        $.each(videos, function (i, video) {

            options.thumbnail(car, video, options);
        });
    }

    function createThumbnail(jqe, video, options) {

        var imgurl = video.thumbnails[0].url;
        var img = $('img[src="' + imgurl + '"]');
        var desc;
        var container;
        if (img.length !== 0) return;
        img = $('<img align="left">');
        img.addClass('thumbnail');
        jqe.append(img);
        img.attr('src', imgurl);
        img.attr('title', video.title);
        img.click(function () {
            options.player(options.maindiv, video, $.extend(true, {}, options, {
                playopts: {
                    autoplay: 1
                }
            }));
        });
        desk = $('<p class="yt-descript">' + video.title + '</p>');
        jqe.append(desk);
        desk.click(function () {
            options.player(options.maindiv, video, $.extend(true, {}, options, {
                playopts: {
                    autoplay: 1
                }
            }));
        });
    }

    var defoptions = {
        autoplay: false,
        user: null,
        carousel: createCarousel,
        player: createPlayer,
       ...