JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<section id="wrapper">
    <div class="videoContainer">
        <video id="myVideo" controls preload="auto" poster="" width="600px">
            <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4" />
        </video>
        <div class="caption">Deneme</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/css3";

@import url(http://fonts.googleapis.com/css?family=Oswald:300);
* {box-sizing: border-box;}
html{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1f323e;
  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%);
}
body{
  font-family: 'Oswald', sans-serif;
  padding:50px;
}
/* video container */
.videoContainer{
	width:600px;
	height:338px;
	position:absolute;
	overflow:hidden;
	background:#000;
	color:#ccc;
	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:#84aeff;
	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:40px;
	left:10px;
	width:600px;
	z-index:5;
	display:none;
}
/* control bottom part */
.btmControl{
	clear:both;
}
.control .btnPlay {
	float:left;
	width:34px;
	height:30px;
	padding:5px;
	cursor:pointer;
}
.control .icon-play{
	background:url(//2.bp.blogspot.com/-IbqoxHqhlPs/VGKcsx4mYsI/AAAAAAAAB2Y/GStP8TwS7tw/s1600/vp_sprite.png) no-repeat -11px 0;
	width: 6px;
	height: 9px;
	display: block;
	margin: 4px 0 0 8px;
}
.control .icon-pause{
	background:url(//2.bp.blogspot.com/-IbqoxHqhlPs/VGKcsx4mYsI/AAAAAAAAB2Y/GStP8TwS7tw/s1600/vp_sprite.png) no-repeat -34px -1px;
	width: 8px;
	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(500);
	$('.caption').fadeIn(500);
 
	//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)...