ytmini

youtube iframe api plugin for jquery. minimalistic, skinnable controls via html/css. lightweight, dead-simple.

by Matt Knight

HTML

<div class="container">
    
<div class="ytmini-wrapper">	
	<div class="ytmini-player" id="video-1"></div>    
    <div class="ytmini-controls-mask">
		<div class="ytmini-controls">
			<div class="ytmini-controls-play"></div>
			<div class="ytmini-controls-scrubber">
				<div class="ytmini-controls-playhead"></div>
			</div>
		</div>
	</div>	
</div>
    
</div>

<br/>
<a class="change-video" href="#" data-ytmini-id="aXlDHdaQoiI">Play YT # aXlDHdaQoiI</a><br/>
<a class="change-video" href="#" data-ytmini-id="l5-EwrhsMzY">Play YT # l5-EwrhsMzY</a>

CSS

.container {
    width: 100%;
    height: 100%;
    max-width: 1000px;
}

.ytmini-wrapper {
    position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
    overflow: hidden;
}
.ytmini-wrapper.ytmini-4x3 {
    padding-bottom: 75%; /* 4:3 */
}

.ytmini-wrapper .ytmini-player {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ytmini-wrapper .ytmini-controls-mask {
	position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 10;
}
.ytmini-wrapper .ytmini-controls {
    position: relative;
    height: 40px;
    width: 100%;
}

.ytmini-wrapper .ytmini-controls-play {
	cursor: pointer;
    top: 0;
    left: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 34.6px;
    border-color: transparent transparent transparent #fff;
    position: relative;
    opacity: 1;
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
}
.ytmini-wrapper .ytmini-controls-play.active {
	width: 10px;
    height: 40px;
    border-style: solid;
    border-width: 0 10px;
    border-color: #fff;    
    opacity: .25;
}

.ytmini-wrapper .ytmini-controls-scrubber {
	margin-top: 4px;
    width: 72.5%;
    height: 3px;
    background-color: rgba(255, 255, 255, .25);
    position: absolute;
    bottom: 19px;
    right: 20px;
}

.ytmini-wrapper .ytmini-controls-playhead {
	width: 0px;
	height: 3px;
	opacity: 1;
	background-color: #FFF;
}

/* aspect ratios from */
/* http://alistapart.com/article/creating-intrinsic-ratios-for-video */
/* http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */

JavaScript

/*
ytmini - http://reconstrukt.com
Licensed under the MIT license
Matthew Knight, 2014

Disclaimer: quick + dirty prototype.  Think of it as a starting point for something more serious, and enjoy.

*/

$(document).ready(function(){

	var vid = 'aXlDHdaQoiI';

	var player = function( vid ) {};
	var video = {
		controls : {
			interval : '',
			duration : 0,
			currtime : 0,
			init : function( yt ){
				
				video.log( 'controls init' );
				
				// reset
				video.controls.end();
				
				// set duration
				if ( yt && yt.getDuration ) {
					video.controls.duration = yt.getDuration();
				}
				
				// set timeout to update playhead
				if ( yt && yt.getCurrentTime ) {
					video.controls.interval = setInterval(function() {
						var oldtime = video.controls.currtime;
						var newtime = yt.getCurrentTime();
						if( newtime !== oldtime ) {
							video.controls.onProgress( newtime );
						}
					}, 100);
				}
				
				// bind play / pause
				$('.ytmini-controls-play').click(function(){
					if ( $(this).hasClass('active') ) {
						// now playing. pause
						video.log( 'controls pause' );
						yt.pauseVideo();
					} else {
						// now paused. play
						video.log( 'controls play' );
						yt.playVideo();
					}
				}).addClass('active');
				
				// reset playhead
				$('.ytmini-controls-playhead').css('width', '0px');
				video.controls.show();
				
			},
			onProgress : function( time ) {
				
				video.log( 'controls progress: ' + video.controls.currtime );					
				video.controls.currtime = time;
				
				// move playhead
				var pct = time / video.controls.duration;
				var wid = pct * $('.ytmini-controls-scrubber').width();					
				$('.ytmini-controls-playhead').css('width', wid + 'px');
				
			},
			end : function() {
				
				video.log( 'controls end' );
				
				// clear timeout
				clearInterval( video.controls.interval );
				video.controls.currtime = 0;
				video.controls.duration = 0;
				
				// unbind play /...