JSFiddle - React, Tailwind, and code Playground

by Mohammed Sameer

HTML

<script src="http://mediaelementjs.com/js/mejs-2.9.2/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://mediaelementjs.com/js/mejs-2.9.2/mediaelementplayer.min.css">
<video width="640" height="360" id="player1" preload="none" controls="controls">
            <source type="video/youtube" src="http://www.youtube.com/watch?v=Lt6CUH9bVzI" />
        </video>

CSS

/* TED player */
.mejs-container.mejs-ted {

}
.mejs-ted .mejs-controls {
	background: #eee;
	height: 65px;
}

.mejs-ted .mejs-button,
.mejs-ted .mejs-time {
	position: absolute;
	background: #ddd;
}
.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-total {
	background-color: none;
	background: url(controls-ted.png) repeat-x 0 -52px;
	height: 6px;
}
.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-buffering {
	height: 6px;
}
.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded {
	background-color: none;
	background: url(controls-ted.png) repeat-x 0 -52px;
	width: 0;
	height: 6px;
}
.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-current {
	width: 0;
	height: 6px;
	background-color: none;
	background: url(controls-ted.png) repeat-x 0 -59px;
}
.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-handle  {
	display: block;
	margin: 0;
	width: 14px;
	height: 21px;
	top: -7px;
	border: 0;
	background: url(controls-ted.png) no-repeat 0 0;	
}
.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-float {	
	display: none;
}
.mejs-ted .mejs-controls .mejs-playpause-button  {
	top: 29px;
	left: 9px;
	width: 49px;
	height: 28px;
}
.mejs-ted .mejs-controls .mejs-playpause-button  button {
	width: 49px;
	height: 28px;
	background: url(controls-ted.png) no-repeat -50px -23px;
	margin: 0;
	padding: 0;
}
.mejs-ted .mejs-controls .mejs-pause button  {
	background-position: 0 -23px;
}

.mejs-ted .mejs-controls .mejs-fullscreen-button  {
	top: 34px;
	right: 9px;
	width: 17px;
	height: 15px;
	background : none;
}
.mejs-ted .mejs-controls .mejs-fullscreen-button  button {
	width: 19px;
	height: 17px;
	background: transparent url(controls-ted.png) no-repeat 0 -66px;
	margin: 0;
	padding: 0;
}
.mejs-ted .mejs-controls .mejs-unfullscreen  button {
	background: transparent url(controls-ted.png) no-repeat -21px -66px;
	margin: 0;
	padding: 0;
}
.mejs-ted .mejs-controls .mejs-volume-button  {
	top: 30px;
	right: 35px;
	width: 24px;
	height: 22px;
}
.mejs-ted .mejs-controls...

JavaScript

// declare object for video
    var player = new MediaElementPlayer('#player1');