I föregående del av den här handledningen, med hjälp av en blandning av HTML5, jQuery och CSS, konstruerade vi barebonesfunktionaliteten i vår HTML5-driven fullskärms videobakgrund. Den här gången kommer vi att utforma det, förbereda fallbacks för det och förstå hur det kan användas som en del av egna arbetsdesigner. I dagens guide lägger vi till vår fullscreen-video på ett antal sätt, inklusive:

  • skapa våra egna mönster överlagringar att sitta över toppen av vår video; som skanningslinjer i gammal tv-stil, utformar din video för att passa din egen design;
  • konverterar vår video till flera format för att möjliggöra universellt stöd för korsbrowser för din videobakgrund.

Tillsammans med allt detta kommer jag också att visa ett exempel på hur videoklippet kan användas kreativt genom att lägga på andra element ovanpå det, vilket visar dig hur denna kraftfulla teknik kan bränna dina egna nya mönster; eller ens ge en ny spännande bakgrund för den designen du jobbar för närvarande!

Har du använt fullscreen video som bakgrund i en av dina mönster? Har du en föredragen metod för implementering? Låt oss veta i kommentarerna.