estoy haciendo una web que tiene un vídeo en la portada. El problema está en que el vídeo es demasiado alto, con lo cual hice el siguiente apaño:
Código CSS
#video-container{
height:85vh;
overflow:hidden;
}
video{
width: 100%;
overflow:hidden;
}
codigo HTML:
<div id="video-container" class="row no-margin no-padding">
<video autoplay loop muted>
<source src="res/videos/video.mp4">
</video>
</div>
No quiero se vean bordes al lado del Vídeo, es decir que ocupe la pantalla entera por los lados pero que no tenga el 100% de su altura ya que se sale de la pantalla en tal caso. Por una parte una solución sería un vídeo con un formato que se adapte para ello, pero no tengo un vídeo de esas dimensiones y me tengo que buscar la vida.
La idea es que quede algo parecido a esto: https://www.ubreakifix.com/
También me gustaría poner unas letras por encima del vídeo pero no sé como se hace.
EDITO:
Añado una cosa que se me ha olvidado y es que así, tal y como está funciona bien en pantallas grandes, pero, al ponerlo en una pantalla de móvil en vertical, el espacio que queda debajo del vídeo es demasiado grande, y por eso necesito cambiar lo que tengo hecho.