0

Estoy intentando poner en la cabecera de una web un vídeo de fondo, cuyas proporciones son de 1920x1080px. El problema que tengo es que no consigo que se adapte al ancho del navegador y se me vé cortado. ¿Cómo puedo adaptarlo? ¿Tiene algo que ver con sus proporciones?

Gracias de antemano, Un saludo.

2
  • 2
    Hola angel, coloca algo de tu código para que sea mas fácil ayudarte
    – Alan
    el 24 may. 2019 a las 15:59
  • 1
    Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! recuerda siempre mostrar que intentaste antes.
    – gbianchi
    el 24 may. 2019 a las 18:06

1 respuesta 1

1

lo que tendrías que hacer es lo siguiente:

El elemento source nos va a ayudar a indicar el origen y tipo del vídeo. En este caso podemos utilizar cualquier formato que esté soportado por los navegadores.

Como lo que queremos es que el usuario no interactue con el vídeo para arrancarlo o pararlo, lo que vamos a hacer es arrancarlo automáticamente mediante la propiedad autoplay

En cuanto a las propiedades lo que haremos será indicar que el mínimo ancho y mínimo alto sean el 100% de la página. Y que a la vez el alto y ancho sean automáticos. También lo que vamos a hacer es desplazar al vídeo hasta la esquina izquierda. Para ello utilizo las propiedades top, left y transform. También lo que haremos será poner el vídeo en el eje de coordenadas Z lo más alejado posible. Así que manipulamos el valor z-index y le damos un valor negativo alto.

También es bueno trabajar con la propiedad background-size y darle el valor de "cover" para que el vídeo ocupe todo el background.

Finalmente nuestro código de estilo del vídeo quedaría así:

video { 
 
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
 
  position: fixed;    
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); 
 
  z-index: -100;
 
  background-size: cover;
 
}
<video id="mivideo" autoplay="autoplay">
  <source src="tecla.ogv" type="video/ogg"></source>
</video>

También te recomendaría buscar el formato adecuado para tu video y que no pese demaciado, para que así la carga de tu pagina no se torne lenta.

1
  • Muchas gracias!
    – AngelFG
    el 25 may. 2019 a las 16:06

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.