Está muy de moda poner videos de fondo en las webs pero a menudo se hace un poco duro que se adapte a la pantalla ya que el tag de video mantienen proporciones, no es cómo poner una imagen de fondo y poner un background-size: cover;. Aquí os dejo un código que he encontrado de Rishabh.

Primero lo que tendremos que hacer es definir el video:

HTML
<div id="video-container">
    <div class="text-container">
        <!-- Contenido -->
    </div>
    <video id="the-video" autoplay loop>
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
        <source src="video.ogg" type="video/ogg">
    </video><!--VIDEO-->
</div><!--VIDEO-CONTAINER-->
CSS
#video-container{
    position: relative;
    overflow: hidden;
}
#the-video{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
 
   transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

Ahora viene lo complicado:

JAVASCRIPT
var video = document.querySelector( '#the-video' ),
    container = document.querySelector( '#video-container' );
 
var setVideoDimensions = function () {
    var w = video.videoWidth,
        h = video.videoHeight,
        videoRatio = ( w / h ).toFixed( 2 ),
        containerStyles = window.getComputedStyle( container ),
        minW = parseInt( containerStyles.getPropertyValue( 'width' ) ),
        minH = parseInt( containerStyles.getPropertyValue( 'height' ) ),
        widthRatio  = minW / w,
        heightRatio = minH / h,
        newWidth  = 0,
        newHeight = 0;
 
    if ( widthRatio > heightRatio ) {
        newWidth  = minW,
        newHeight = Math.ceil( newWidth / videoRatio );
    }else{
        newHeight = minH,
        newWidth  = Math.ceil( newHeight * videoRatio );
    }
 
    video.style.width  = newWidth  + 'px';
    video.style.height = newHeight + 'px';
};
 
video.addEventListener( 'loadedmetadata', setVideoDimensions, false );
window.addEventListener( 'resize', setVideoDimensions, false );

Podéis comprobar la demostración aquí

Categorías: JavaScript
Si necesitas una url corta puede usar: codygo.es/1808

Deja un comentario