Usar un video de YouTube incrustado como fondo es una técnica común en los sitios web de hoy en día. Puede usar la etiqueta de video HTML5 para crear un video de fondo. Sin embargo, eso significaría alojar un video en línea en algún lugar. Y no te conozco, pero en mi caso siempre trato de evitar esa opción. Las incrustaciones de videos de Youtube son una buena alternativa a los videos autohospedados. Ahorran ancho de banda y se cargan súper rápido. Pero, dado que están en un iframe, pueden ser un poco más complicados de manejar. En este tutorial, repasaremos cómo crear un fondo de video de YouTube para nuestro sitio web.
Obtener el HTML para el video incrustado de Youtube
Lo primero que tenemos que hacer es agarrar el código de inserción del video de YouTube que queremos mostrar en segundo plano. Simplemente vaya a su video elegido y haga clic en el botón “compartir”.
Aparecerán varias opciones. Haga clic en el “insertar”.
Esto abrirá un nuevo cuadro en su pantalla con el código para el video que desea incrustar. Deshabilite “Mostrar controles del reproductor” en las opciones de inserción y luego haga clic en el botón “copiar”.
Ahora cree un contenedor div y pegue allí su código de inserción.
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Yj2iELI6OeI?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Eliminaremos todas las propiedades innecesarias, que son todas excepto los controles = 0 (las propiedades de ancho y alto también deben eliminarse). Finalmente, agregaremos dos propiedades adicionales: autoplay = 1, mute = 1 y playsinline = 1.
<div class="video-container">
<iframe src="https://www.youtube.com/embed/Yj2iELI6OeI?&autoplay=1&mute=1&playsinline=1"></iframe>
</div>
Observe cómo se requiere el parámetro playsinline para reproducir videos en línea en iOS y otros dispositivos móviles. Más sobre el API de reproductor de IFrame de Youtube.
El resultado final es un div de contenedor de video que tiene un iframe que contiene la fuente del video de YouTube. Este video se reproducirá automáticamente en silencio cuando uno de nuestros usuarios visite nuestra página web.
Centrar el fondo del video de YouTube con CSS
Para hacer que el iframe sea un fondo de video de YouTube de página completa, aplicaremos algunas propiedades CSS al contenedor de video principal, así como al iframe:
.video-container{
width: 100vw;
height: 100vh;
}iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
}
Las propiedades CSS aplicadas en el contenedor principal lo escalan al 100 % de la altura y el ancho de la ventana gráfica. El iframe que está dentro también se escala al 100% de la altura y el ancho de la ventana gráfica de la pantalla.
El iframe tendrá una posición absoluta que nos permitirá posicionar el iframe exactamente donde lo queramos. En este caso, se coloca encima del contenedor principal. Los atributos de posicionamiento superior e izquierdo se utilizan para establecer la ubicación de la esquina superior izquierda del iframe en el centro de la pantalla.
Para centrar el fondo de nuestro video de YouTube, usamos transform para aplicar un margen superior negativo de la mitad de la altura del video y un margen izquierdo negativo de la mitad del ancho del video. Esto compensará el iframe en relación con el elemento (no el contenedor principal) y centrará el fondo del video de YouTube vertical y horizontalmente.
Haciendo nuestro video a pantalla completa
Como puede ver ahora, nuestro video de YouTube está ubicado en el centro de la pantalla, pero no se ha escalado para que ocupe todo el ancho de nuestro sitio web. Para hacerlo, utilizaremos la función multimedia de relación de aspecto:
@media (min-aspect-ratio: 16/9) {
.video-container iframe {
height: 56.25vw;
}
}@media (max-aspect-ratio: 16/9) {
.video-container iframe {
width: 177.78vh;
}
}
La relación de aspecto es la relación de ancho a alto de la ventana gráfica. dieciséis:9 denota un ancho de 16 unidades y una altura de 9 unidades. 16:9 es la relación de aspecto estándar de pantalla ancha que se usa en la web. Generalmente, la mayoría de los videos se graban en esta relación de aspecto.
La relación de aspecto 16:9 corresponde a 56,25 de la altura de la ventana gráfica y 177,78 de la anchura de la ventana gráfica. Para crear una proporción de 16:9, debemos dividir 9 entre 16 (0,5625 o 56,25%). Esto permite que el navegador determine las dimensiones del video según el ancho de su contenedor principal. Esto mantendrá la relación de aspecto del video de Youtube a medida que se escala para ajustarse al fondo de la página web.
Agregar texto superpuesto en la parte superior de nuestro video
El texto que se mostrará sobre nuestro video de Youtube de fondo se coloca dentro de un div separado como este:
<div id="text">
<h1>Use a youtube video as a full screen background with CSS</h1>
</div>
El CSS se aplica en el div de texto para moverlo junto con cualquiera de sus contenidos en la parte superior del video:
#text{
position: absolute;
color: #FFFFFF;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}Hemos aplicado las mismas propiedades CSS que hicimos en el iframe para centrar el texto-div en el centro de nuestra página web. Querrá asegurarse de que el texto que se coloca encima de nuestro fondo de video de YouTube tenga un alto contraste para que pueda leerse fácilmente.
También puede colocar otros elementos, como botones flotantes, y usar las mismas propiedades de CSS para colocarlos encima de nuestro fondo de video de YouTube.
Agregar la opción de bucle incrustado de Youtube
Si usa un video corto, notará cómo se muestran los videos relacionados una vez que finaliza el video. Para evitar esto tenemos que usar un pequeño truco. Agregar el parámetro loop=1 a la fuente del video ya no es suficiente, tenemos que agregar más parámetros y esta es la lista de reproducción a la que le asignaremos la ID del video de youtube.
Entonces, si tenemos este video debemos buscar su id, que es el código después de la parte /embed/ o después de ?v= al acceder al video a través de youtube. Luego, simplemente lo pegamos en nuestro parámetro de lista de reproducción:
&playlist=Yj2iELI6OeI&loop=1
Nuestro video incrustado final debería verse así:
<iframe src="https://www.youtube.com/embed/Yj2iELI6OeI?controls=0&autoplay=1&mute=1&playsinline=1&playlist=Yj2iELI6OeI&loop=1">
</iframe>
Resultado
Y aquí está el resultado: ¡un hermoso video de pantalla completa usando Youtube!
Conclusión
Crear un fondo de video de YouTube es una de las soluciones más simples para marcar la diferencia y destacarse de sus competidores web. Los usuarios que ingresen a su sitio web se verán inmersos en una experiencia visual única que no olvidarán fácilmente.
Esta técnica puede ser bastante impresionante con videos de pantalla completa en sitios web que usan fullPage.js. ¡Mira este ejemplo de videos de pantalla completa!
Ahora que ha aprendido a crear un fondo de video de YouTube, ¡es hora de “presumir”! Si planea iniciar un negocio, crear una página de destino con un fondo de video de YouTube sería una solución fácil que causará al mismo tiempo una gran impresión en sus posibles clientes. Comparta con nosotros sus sitios web cuando termine. ¡Nos encantaría verlos!
