In de vorig deel van deze tutorial, gebruik makend van een mix van HTML5, jQuery en CSS, hebben we de barebones-functionaliteit van onze HTML5-gestuurde video-achtergrond op volledig scherm gebouwd. Deze keer gaan we het in model brengen, fallbacks voorbereiden en begrijpen hoe het kan worden gebruikt als onderdeel van je eigen werkontwerpen. In de handleiding van vandaag voegen we op een aantal manieren aan onze fullscreen-video toe, waaronder:

  • onze eigen patroonoverlays maken om over de bovenkant van onze video te zitten; zoals scanlijnen in oude tv-stijl, waarbij uw video wordt gestileerd volgens uw eigen ontwerp;
  • het converteren van onze video naar meerdere indelingen om universele ondersteuning voor meerdere browsers mogelijk te maken voor uw video-achtergrond.

Samen met dit alles, zal ik ook een voorbeeld laten zien van hoe de video op een creatieve manier kan worden gebruikt door er andere elementen bovenop te leggen, zodat je kunt zien hoe deze krachtige techniek je eigen nieuwe ontwerpen kan voeden; of geef zelfs een nieuwe, opwindende achtergrond voor dat ontwerp waaraan u momenteel werkt!

Heb je fullscreen video als achtergrond in een van je ontwerpen gebruikt? Heeft u een voorkeursuitvoeringsmethode? Laat het ons weten in de comments.