En el parte anterior de este tutorial, usando una mezcla de HTML5, jQuery y CSS, construimos la funcionalidad barebones de nuestro fondo de video de pantalla completa impulsado por HTML5. En esta ocasión, vamos a diseñarlo, preparar los retrocesos para él y comprender cómo se puede usar como parte de sus propios diseños de trabajo. En la guía de hoy, agregaremos a nuestro video a pantalla completa de varias maneras, que incluyen:

  • creando nuestras propias superposiciones de patrones para ubicarnos en la parte superior de nuestro video; como las líneas de escaneo de estilo de televisión antigua, diseñando su video para adaptarlo a su propio diseño;
  • convirtiendo nuestro video a múltiples formatos para permitir el soporte universal entre navegadores para su fondo de video.

Junto con todo esto, también mostraré un ejemplo de cómo el video se puede usar creativamente al superponer otros elementos sobre el mismo, mostrándote cómo esta poderosa técnica puede alimentar tus propios diseños; ¡o incluso proporciona un fondo nuevo y emocionante para ese diseño en el que estás trabajando actualmente!

¿Has usado el video a pantalla completa como fondo en uno de tus diseños? ¿Tiene un método preferido de implementación? Háganos saber en los comentarios.