Video de fondo de pantalla completa adaptable en JavaScript puro-bideo. js

Vista prévia

Descripción

bideo. js es una biblioteca JavaScript fácil y ligera que le permite utilizar cualquier vídeo HTML5 como un fondo de pantalla completa para su página web. Diseño totalmente responsivo y características superposición de página & portada de video.

Funcionamiento

Cree un elemento de vídeo vacío en la Página Web.

<video id="background_video" loop muted autoplay></video>

Cree una superposición de pantalla completa que cubra el vídeo de fondo (opcional).

<div id="overlay"></div>

Cree un contenedor DIV para colocar la cubierta de vídeo.

<div id="video_cover"></div>

Cargue la biblioteca de JavaScript bideo. js en la parte inferior de la Página Web.

<script src="bideo.js"></script>

Haga que el video de fondo siempre esté centrado cada vez que cambie el tamaño de la ventana.

#background_video {

position: absolute;

top: 50%; left: 50%;

transform: translate(-50%, -50%);
}

Agregue una imagen de fondo al contenedor de portada.

#video_cover {

position: absolute;

width: 100%; height: 100%;

background: url('cover.png') no-repeat;

background-size: cover;

background-position: center;
}

Estilo de la superposición de pantalla completa.

#overlay {

position: absolute;

top: 0; right: 0; left: 0; bottom: 0;

background: rgba(0,0,0,0.5);
}

Inicialice el bideo. js y especifique la ruta de vídeo/tipo que desea reproducir.

(function () {

var bv = new Bideo();

bv.init({


// Video element


videoEl: document.querySelector('#background_video'),



// Container element


container: document.querySelector('body'),



// Resize


resize: true,



// Array of objects containing the src and type


// of different video formats to add


src: [



{




src: 'mov_bbb.mp4',




type: 'video/mp4'



}


],



// What to do once video loads (initial frame)


onLoad: function () {



document.querySelector('#video_cover').style.display = 'none';


}

});
}());