JSFiddle - React, Tailwind, and code Playground

by Mohammed Sameer

HTML

<video id="homePage-video" src="" class="video-js vjs-default-skin  home-page-videoContainer" controls preload="auto" width="400" height="300" data-setup='{ "techOrder": ["youtube"], "src": "https://www.youtube.com/embed/eAvrE-2posU" }'>
                            </video>

CSS

/*!
Video.js Default Styles (http://videojs.com)
Version 4.1.0
Create your own skin at http://designer.videojs.com
*/


/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin, 
replace all occurances of 'vjs-default-skin' with a new name. Then add your new 
skin name to your video tag instead of the default skin. 
e.g. <video class="video-js my-skin-name">
*/

.vjs-default-skin {
    color: #888888;
}


/* Custom Icon Font
--------------------------------------------------------------------------------
The control icons are from a custom font. Each icon corresponds to a character
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
*/

@font-face {
    font-family: 'VideoJS';
    src: url('font/vjs.eot');
    src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* Base UI Component Classes
-------------------------------------------------------------------------------- 
*/


/* Slider - used for Volume bar and Seek bar */

.vjs-default-skin .vjs-slider {
    /* Replace browser focus hightlight with handle highlight */
    outline: 0;
    position: relative;
    cursor: pointer;
    padding: 0;
    /* background-color-with-alpha */
    background-color: #333333;
    background-color: rgba(51, 51, 51, 0.9);
}

.vjs-default-skin .vjs-slider:focus {
    /* box-shadow */
    -webkit-box-shadow: 0 0 2em #ffffff;
    -moz-box-shadow: 0 0 2em #ffffff;
    box-shadow: 0 0 2em #ffffff;
}

.vjs-default-skin .vjs-slider-handle {
    position: absolute;
    /* Needed for IE6 */
    left: 0;
    top: 0;
}

.vjs-default-skin .vjs-slider-handle:before {
    content: "\e009";
    font-family: VideoJS;
    font-size: 1em;
    line-height: 1;
    text-align: center;
    text-shadow: 0em 0em 1em #fff;
    position:...

JavaScript

/*! Video.js v4.1.0 Copyright 2013 Brightcove, Inc. https://github.com/videojs/video.js/blob/master/LICENSE */
 (function() {var b=void 0,f=!0,h=null,l=!1;function m(){return function(){}}function p(a){return function(){return this[a]}}function r(a){return function(){return a}}var t;document.createElement("video");document.createElement("audio");document.createElement("track");function u(a,c,d){if("string"===typeof a){0===a.indexOf("#")&&(a=a.slice(1));if(u.va[a])return u.va[a];a=u.r(a)}if(!a||!a.nodeName)throw new TypeError("The element or ID supplied is not valid. (videojs)");return a.player||new u.C(a,c,d)}var v=u;
window.Bd=window.Cd=u;u.Qb="4.1";u.yc="https:"==document.location.protocol?"https://":"http://";u.options={techOrder:["html5","flash"],html5:{},flash:{},width:300,height:150,defaultVolume:0,children:{mediaLoader:{},posterImage:{},textTrackDisplay:{},loadingSpinner:{},bigPlayButton:{},controlBar:{}}};"GENERATED_CDN_VSN"!==u.Qb&&(v.options.flash.swf=u.yc+"vjs.zencdn.net/"+u.Qb+"/video-js.swf");u.va={};u.ka=u.CoreObject=m();
u.ka.extend=function(a){var c,d;a=a||{};c=a.init||a.g||this.prototype.init||this.prototype.g||m();d=function(){c.apply(this,arguments)};d.prototype=u.i.create(this.prototype);d.prototype.constructor=d;d.extend=u.ka.extend;d.create=u.ka.create;for(var e in a)a.hasOwnProperty(e)&&(d.prototype[e]=a[e]);return d};u.ka.create=function(){var a=u.i.create(this.prototype);this.apply(a,arguments);return a};
u.d=function(a,c,d){var e=u.getData(a);e.z||(e.z={});e.z[c]||(e.z[c]=[]);d.u||(d.u=u.u++);e.z[c].push(d);e.T||(e.disabled=l,e.T=function(c){if(!e.disabled){c=u.hc(c);var d=e.z[c.type];if(d)for(var d=d.slice(0),k=0,q=d.length;k<q&&!c.nc();k++)d[k].call(a,c)}});1==e.z[c].length&&(document.addEventListener?a.addEventListener(c,e.T,l):document.attachEvent&&a.attachEvent("on"+c,e.T))};
u.t=function(a,c,d){if(u.mc(a)){var e=u.getData(a);if(e.z)if(c){var g=e.z[c];if(g){if(d){if(d.u)for(e=0;e<g.length;e++)g[e].u===d.u&&g.splice(e--,1)}else...