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();
});