jQuery: rendere i video fullscreen

jQuery: rendere i video fullscreen

I video a fullscreen sono molto richiesti, soprattutto se si utilizzano i video HTML5. Vediamo come implementare questa soluzione.

Partiamo dalla seguente marcatura:


<body>
<div id="video-wrapper">
	<video id="video" controls>
		<source src="video.mp4" />
		<source src="video.ogv" />	
	</video>
</div>
<!-- ... -->
</body>

Aggiungiamo degli stili CSS di base:


#video-wrapper {
	width: 100%;
	height: 100%;
	min-height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

#video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Quindi definiamo il seguente plugin jQuery:


(function( $ ) {
	$.fn.fullScreen = function( options ) {
	
	    options = $.extend({
	    	aspect: 16 / 9
	    }, options);
	
		var _updateSize = function( element ) {
		
			var windowW = $( window ).width();
			var windowH = $( window ).height();
			var windowAspect = windowW / windowH;
			
			if ( windowAspect < options.aspect ) {
			
				element
				.width( windowH * options.aspect )
		        .height( windowH );
		        
		        element
				.css( "top", -( windowW / options.aspect - windowH ) / 2 )
				.css( "left", 0 )
				.css( "height", windowW / options.aspect );
				
				element
				.css( "width", windowH * options.aspect )
				.css( "height", windowH );
			
			} else {
				element
				.width( windowW )
				.height( windowW / options.aspect );
		
				element
				.css( "top", -( windowW / options.aspect - windowH ) / 2 )
				.css( "left", 0 )
				.css( "height", windowW / options.aspect );
		
				element
				.css( "width", element.parent().width() + "px" )
				.css( "height", "auto" );	
			
			}
				
		};
		return this.each(function() {
			var $element = $( this );
			_updateSize( $element );
			
			$( window ).on( "resize", function() {
				_updateSize( $element );	
			
			});
		});	
	};

})( jQuery );


Infine invochiamo il plugin:


$(function() {
	$( "#video" ).fullScreen();

});


Torna su