Si ocurre un desbordamiento se debe a que existe un border o padding que hace que ocupe más allá de sus dimensiones. Recuerda que todo elemento tiene 4 cajas: caja de margen, caja de borde, caja de relleno y caja de contenido. Esas cuatro cajas conforman las dimensiones de todo elemento.
La etiqueta video
es un elemento inline
y, como se tiene conocimiento, estos elementos agregan una especie de espacio en blanco al rededor de ellos, causando que sus dimensiones iniciales se vean afectadas.
La solución (hay varias) es simple: hacer el video un elemento de bloque:
/*
* Reseteado CSS básico. Todo navegador
* agrega por defecto estilos a las etiquetas,
* por lo que es conveniente "normalizarlas".
* Además, es recomendado usar el modelo de
* caja border-box en lugar de content-box.
*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.video {
height: 100vh;
width: 100vw;
}
.video video {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
<section class="video">
<video controls autoplay>
<source src="https://dl.dropboxusercontent.com/s/odxyj57wwvz0mib/deadpool2-trailer.mp4?dl=0" type="video/mp4"/>
</video>
</section>
He usado object-fit
la cual hace que ciertas etiquetas como video
desechen el aspect ratio por defecto y se adapte a las dimensiones. Si quieres hacer un fullscreen completo, te puede servir la API Fullscreen que tiene un soporte bastante decente. Por otro lado, el soporte para object-fit
es también bueno, excepto por IE y Edge (supongo este último lo implementará pronto).