Creación de un fondo de vídeo de pantalla completa con Pure JS-Background-video

Vista prévia

Descripción

Background-video es una solución JavaScript/CSS pura para crear un fondo de video con soporte de lista de reproducción para su página web.

Funcionamiento

Coloque la biblioteca JavaScript de fondo-vídeo en la parte inferior de su página web.

<script src="background-video.js"></script>

Cree un nuevo objeto BackgroundVideo y establezca los orígenes de vídeo que desea utilizar.

new BackgroundVideo({


/*


 * container [optional]: id of the element, where to add video background.



* If ommited video background is added to the BODY element.


 * Example:


 * container: "myId",


 */





/*


 * video: list of video files


 *



* Note: If you have one video in different formats (mp4, webm, ogv, etc)


 * you can add them all to ensure browser compatibility.


 * Use 'formats' option to list all additional formats.


 */


video: [




{






file: "1.mp4"




},




{






file: "v2.ogv",






formats: [ "mp4", "webm" ]




},




{






file: "3.mp4"




}


],


/*


 * To save traffic mobile users see a still image instead of video.


 */


mobileImg: "poster.jpg"
});

Los estilos CSS requeridos para hacer el fondo de vídeo de pantalla completa y posición absoluta.

.flexible {

position:absolute;

object-fit: cover;

width: 100%;

height: 100%;

z-index: -999;

top: 0;

left: 0;
}

Registro de cambios

08/15/2018

• Haga la imagen de fondo en la cubierta móvil todo el contenedor