En HTML5 tenemos la maravillosa etiqueta video, que nos permite insertar vídeos en nuestra web. Sin embargo, debido a que cada navegador necesita un formato diferente, si queremos utilizar esta etiqueta tendremos que tener nuestro video en los 3 formatos soportados para asegurarnos que se vea bien en los navegadores.
Este «problema» lo podemos solucionar utilizando Youtube como reproductor de video, puesto que ya se encarga Youtube de realizar la conversión del video al formato adecuado ahorrándonos nosotros esos quebraderos de cabeza.
El código para embeber el video desde youtube es:
https://www.youtube.com/embed/EJEMPLO
Queremos que ocupe el 100% de la pantalla.
Lo más importante de todo… queremos que nuestro video de fondo ocupe el 100% de la pantalla, puesto que si lo queremos de fondo ha de ser así…
Bien, para esto no tenemos más que recurrir al viejo CSS2.1 nada de nuevas reglas propias de CSS3, esto existe desde hace muchos años!!
Para que el iframe de Youtube ocupe el 100% sólo deberemos especificar en nuestro CSS que el width y height es del 100% con el añadido del position.
La propiedad CSS position permite indicar si un elemento tiene una posición static, relative, absolute, fixed. En la siempre recurrida w3schools tenemos una completa definición del position
En la web de W3Schools podemos ver que la position «fixed» significa que la etiqueta se posicionará de forma relativa a la ventana del navegador… o sea, lo que queremos.
Así pues, ancho y alto al 100% y posición fixed para que nuestro video de fondo ocupe el 100%, ya lo tenemos todo!! Sólo falta codificar.
Código HTML y CSS con video de fondo
El código CSS
El código HTML
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <link href="./video-1.css" type="text/css" rel="stylesheet" />
- </head>
- <body>
- <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/kf9sW3i0nsc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- </body>
- </html>
