Video background cover in HTML5 e CSS

In circolazione ci sono vari script Javascript o jQuery che permettono di impostare un video HTML5 come sfondo fullscreen ma, in realtà, è possibile raggiungere tale obbiettivo anche con poche righe di codice CSS.

Prima di tutto inseriamo all’interno della nostra pagina il markup del video:

<video class="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
   <source src="video.webm" type="video/webm">
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg ogv">
   Video not supported
</video>

Ed ora è necessario un piccolo compromesso, dobbiamo infatti scegliere dove “ancorare” il video, ossia il punto che sarà sempre visibile (mentre il resto del video verrà nascosto nel caso in cui l’aspect ratio dello schermo fosse diverso da quello del video), nel codice d’esempio abbiamo scelto l’angolo in basso a destra (bottom: 0; right: 0;).

.video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

Il trick sta nell’impostare la larghezza e l’altezza come “auto” e min-width e min-height come “100%”, fondamentalmente stiamo forzando il browser ad avere sempre almeno il 100% del video visibile, l’eccedenza verrà poi nascosta impostando l’overflow “hidden”; impostando poi z-index a “-1000” ci assicuriamo che il video sia sotto i contenuti della pagina, ed ecco ottenuto il video fullscreen come sfondo!

Matteo Currò

Autore: Mi chiamo , ho 29 anni e lavoro come freelance Web designer e Front-end developer aiutando startups e aziende a migliorare o a rivoluzionare la loro immagine nel web.