Nel parte precedente di questo tutorial, utilizzando una combinazione di HTML5, jQuery e CSS, abbiamo costruito le funzionalità barebone del nostro background video a schermo intero basato su HTML5. Questa volta, lo modelleremo, prepareremo dei fallback e comprenderò come può essere usato come parte dei tuoi progetti di lavoro. Nella guida di oggi, aggiungeremo al nostro video a schermo intero in vari modi, tra cui:

  • creare i nostri overlay di pattern per sederci sopra il nostro video; come le linee di scansione di vecchio stile televisivo, che modellano il tuo video per adattarlo al tuo design;
  • convertire il nostro video in più formati per abilitare il supporto universale per browser per lo sfondo del tuo video.

Insieme a tutto questo, mostrerò anche un esempio di come il video può essere utilizzato in modo creativo sovrapponendo altri elementi sopra di esso, mostrando come questa potente tecnica può alimentare i tuoi nuovi design; o persino fornire uno sfondo nuovo ed eccitante per il design a cui stai lavorando attualmente!

Hai usato il video a schermo intero come sfondo in uno dei tuoi disegni? Hai un metodo di implementazione preferito? Fateci sapere nei commenti.