Saltar al contenido

Vídeos a Pantalla Completa con HTML5 y CSS3

3 mayo, 2018
Vídeos a Pantalla Completa con HTML5 y CSS3

Los vídeos a pantalla completa con Html5 y CSS3 son uno de los recursos más utilizados en las páginas modernas. Aprende a crearlo con este sencillo tutorial.

Vídeos a Pantalla Completa con HTML5 y CSS3

Los vídeos a pantalla completa con Html5 pueden ser una característica poderosa para atraer visitas a tu sitio web y, a través de CSS3, daremos los estilos necesarios para realizarlo.

No  es nada complejo, únicamente consiste en crear un fondo (background) con nuestro vídeo.

Comenzamos con el HTML

Como siempre creamos un archivo html donde colocaremos la dirección de nuestro vídeo.

Además he creado un título y una pequeña descripción que se colocarán en el lateral derecho de la página.

Vídeo a Pantalla completa con Texto Centrado

Por último he añadido un botón para poder realizar una pausa del vídeo.

Los estilos CSS

Mediante la hoja de estilos vamos a crear el fondo con el vídeo a pantalla completa.

Control del Elemento Video con Html5 y JavaScript

También colocaremos el título y una pequeña descripción del mismo en el lateral, tal y como os he explicado anteriormente.

Botón de Pausa con JavaScript

Para finalizar nuestro proyecto crearemos un archivo en JavaScript. Éste nos permitirá pausar el vídeo en cualquier momento.

Y listo, hasta aquí este sencillo tutorial donde hemos aprendido a crear un vídeo a pantalla completa con Html5 y CSS3.

Cualquier duda o sugerencia me la podéis dejar en los comentarios y las redes sociales. ¡Gracias!

Contenido Relacionado

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Comentarios (3)

Hola magnífico ejemplo y uy claro.
Lo que no encontré es el controlador de tiempo de arranque del vídeo para que tenga menos delay..

Muchísimas gracias!!

Responder

Muchas gracias por tu comentario. Intentaré actualizar el apartado html5 y css3 con nuevas mejoras. ¡Un saludo!

Responder

ya solucioné lo del delay, lo que encuentro como problema es que en el Ipad, (Safari-Chrome) aparece pantalla de video por la mitad, intentaré ver el motivo,pero es algo con responsive.

Responder