CSS: impostare un video HTML5 a tutto schermo

Con i CSS possiamo impostare un video HTML5 a tutto schermo.

Partiamo dalla seguente marcatura:

<div id="video-wrap">
    <video controls="controls" id="video">
        <source src="assets/video/video.mp4" type="video/mp4" />
        <source src="assets/video/video.ogv" type="video/ogg" />
    </video>
</div>

Possiamo sfruttare le nuove unità di misura CSS relative alla viewport e la proprietà object-fit per fare in modo che il video occupi tutta la larghezza e l'altezza dello schermo.

html, body {
    margin: 0;
    padding: 0;
}

#video-wrap {
    background: #000;
    width: 100%;
    height: 100vh;
}

#video {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Demo

CSS: full screen video