HTML5: video di sfondo con pattern

Nell'esempio proposto inseriamo un video di background fruendo delle potenzialità dei tag html5 unite all'uso di CSS3.

In un div a z-index negativo posizioniamo quindi il nostro video (attenzione, nell'esempio è inserito solo un formato mp4, nella realizzazione pratica è opportuno fornire almeno un formato alternativo .ogg per garantire una maggiore compatibilità di visualizzazione video rispetto a browser diversi), mentre in un div posizionato a livello superiore inseriamo come background il pattern da noi creato determinandone l'opacità.

Con questa tecnica possiamo altresì creare pattern standard da applicare su immagini del nostro sito senza doverle trattare precedentemente con Photoshop, basta inserire l'immagine in sostituzione del video!

Qui trovate l'esempio da cui poter anche accedere alla visualizzazione del codice sorgente.