JSFiddle - React, Tailwind, and code Playground

by ManuJT

HTML

<section>
<div class="videoContainer">
		
    <video id="myVideo" controls preload="auto" poster="http://simplypx.com/images/vp_poster.jpg" width="580" >
      <source src="http://simplypx.com/images/Prometheus.mp4" type="video/mp4" />
		  <p>Your browser does not support the video tag.</p>
		</video>
		<div class="caption">Prometheus</div>
		<div class="control">
			<div class="btmControl">
				<div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
				<div class="progress-bar">
					<div class="progress">
						<span class="bufferBar"></span>
						<span class="timeBar"></span>
					</div>
				</div>
				<!--<div class="volume" title="Set volume">
					<span class="volumeBar"></span>
				</div>-->
				<div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
				<div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
			</div>
			
		</div>
	</div>
</section>

CSS

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Oswald:300);

* { box-sizing: border-box; }

html { width: 100%; height: 100%; overflow: hidden; }
body { 
	background: #1f323e;
	font-family: 'Oswald', sans-serif;
  background: radial-gradient(80% 0%, ellipse cover, rgba(66,97,104,1) 0%,rgba(49,67,74,.1) 100%), radial-gradient(20% 100%, ellipse cover, rgba(8,13,17,1) 0%,rgba(36,58,67,1) 100%);
}

video { border-radius: 6px; }

/* video container */
.videoContainer{
	width:380px;
	height:243px;
	position:relative;
	overflow:hidden;
	background:#000;
	color:#ccc;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.8);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	margin: 50px auto 0;
}
.videoContainer:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
	z-index: 6;
	border-radius: 6px;
	pointer-events: none;
}

/* video caption css */
.caption{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	padding: 5px 10px;
	color:#ddd;
	font-size:14px;
	font-weight:300;
	text-align: center;
	background: rgba(0,0,0,0.4);
	text-transform: uppercase;
	border-radius: 6px 6px 0 0;
	-webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control{
	color:#ccc;
	position:absolute;
	bottom:10px;
	left:10px;
	width:360px;
	z-index:5;
	display:none;
}
/* control bottom part */
.btmControl{
	clear:both;
}
.control .btnPlay {
	float:left;
	width:34px;
	height:30px;
	padding:5px;
	background: rgba(0,0,0,0.5);
	cursor:pointer;
	border-radius: 6px 0 0 6px;
	border: 1px solid rgba(0,0,0,0.7);
	box-shadow: inset 0 0 1px rgba(255,255,255,0.5);
}
.control .icon-play{
	background:url(http://simplypx.com/images/vp_sprite.png) no-repeat -11px 0;
	width: 6px;
	height: 9px;
	display: block;
	margin: 4px 0 0 8px;
}
.control...

JavaScript

/*
JS Modified from a tutorial found here: 
http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/
I really wanted to learn how to skin html5 video.
*/
$(document).ready(function(){
	//INITIALIZE
	var video = $('#myVideo');
	
	//remove default control when JS loaded
	video[0].removeAttribute("controls");
	$('.control').fadeIn(1200);
	$('.caption').fadeIn(1200);
 
	//before everything get started
	video.on('loadedmetadata', function() {
			
		//set video properties
		$('.current').text(timeFormat(0));
		$('.duration').text(timeFormat(video[0].duration));
		updateVolume(0, 0.7);
			
		//start to get video buffering data 
		setTimeout(startBuffer, 150);
			
		//bind video events
		$('.videoContainer')
		.hover(function() {
			$('.control').stop().fadeIn();
			$('.caption').stop().fadeIn();
		}, function() {
			if(!volumeDrag && !timeDrag){
				$('.control').stop().fadeOut();
				$('.caption').stop().fadeOut();
			}
		})
		.on('click', function() {
			$('.btnPlay').find('.icon-play').addClass('icon-pause').removeClass('icon-play');
			$(this).unbind('click');
			video[0].play();
		});
	});
	
	//display video buffering bar
	var startBuffer = function() {
		var currentBuffer = video[0].buffered.end(0);
		var maxduration = video[0].duration;
		var perc = 100 * currentBuffer / maxduration;
		$('.bufferBar').css('width',perc+'%');
			
		if(currentBuffer < maxduration) {
			setTimeout(startBuffer, 500);
		}
	};	
	
	//display current video play time
	video.on('timeupdate', function() {
		var currentPos = video[0].currentTime;
		var maxduration = video[0].duration;
		var perc = 100 * currentPos / maxduration;
		$('.timeBar').css('width',perc+'%');	
		$('.current').text(timeFormat(currentPos));	
	});
	
	//CONTROLS EVENTS
	//video screen and play button clicked
	video.on('click', function() { playpause(); } );
	$('.btnPlay').on('click', function() { playpause(); } );
	var playpause = function() {
		if(video[0].paused || video[0].ended)...