JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<div id="youtube_9bZkp7q19f0">JavaScript is required to play this video.</div>

<div id="youtube_VIVIegSt81k">JavaScript is required to play this video.</div>

CSS

[id^="youtube_"] {
    display:block;
    width: 640px;
    border-bottom: 1px dotted black;
    overflow: auto;
    margin-bottom: 30px;
}

[id^="youtube_"] .play-pause {
    display:block;
    float:left;
    margin-bottom: 4px;
    margin-left: 9px;
}

[id^="youtube_"] .video-slider {
    font-size: 11px;
    width: 500px;
    float:left;
    margin: 3px 9px 0 9px;
}

[id^="youtube_"] .time {
    font-family: Arial;
    display:block;
    float:right;
    display: block;
    width: 70px;
    text-align: right;
    margin-right: 9px;
    font-size: 11px;
    line-height: 16px;
}

[id^="youtube_"] .mute {
    display: block;
    float: left;
}

.ui-slider-handle {
    outline: 0;
}

JavaScript

(function($) {
    $.fn.videoPlayer = function( options ) {

        return this.each(function() {

            var settings = $.extend( {
              'related' : '0',
              'annotations' : '0'
            }, options);

            $this = $(this);

            var youtubeId = $this.attr('id').split('_')[1];
            var sliding = false;

            function makeMinutes(seconds) {
                seconds = Math.ceil(seconds);
                var minutes = Math.floor(seconds / 60);
                var sec = seconds - (minutes * 60);
                if (sec < 10) {
                    sec = '0' + sec;
                }
                return minutes + ":" + sec;
            }

            function updateCurrentInfo() {
                $('#youtube_' + youtubeId + ' .current-time').html(makeMinutes(player.getCurrentTime()));
                if (!sliding) slider.slider({
                    value: player.getCurrentTime()
                });
            }

            function updateVideoInfo() {
                $('#youtube_' + youtubeId + ' .duration').html(makeMinutes(player.getDuration()));
                slider.slider({
                    animate: false,
                    max: player.getDuration()
                });
            }

            function onPlayerReady(event) {
                // event.target.mute();
                setInterval(updateCurrentInfo, 100);
                updateCurrentInfo();
            }

            $this.html('<div id="' + youtubeId + '_frame"></div><span class="play-pause ui-icon ui-icon-play">Play</span><div class="video-slider"></div><span class="mute ui-icon ui-icon-volume-on">Mute</span><span class="time"><span class="current-time">0:00</span> / <span class="duration">0:00</span></span>');

            var slider = $('#youtube_' + youtubeId + ' .video-slider').slider({
                animate: true,
                slide: function(event, ui) {
                    player.seekTo(ui.value, true);
               ...