2

quiero poner un vídeo en mi página web realizada con HTML y CSS, el vídeo me gustaria que estuviera en la parte de arriba, y que me abarque el 100% de ancho, pero de alto que pudiera estar a un 50%, sin embargo no logro redimensionar la altura del vídeo, me gustaría saber si hay alguna forma y si me pudieran ayudar, de antemano, muchas gracias. :)

Me gustaría que se viera algo así, como en esta página: https://www.pexels.com/es-es/videos/

Siento que su altura es de aproximadamente un 50%-80%

Código HTML:

<div class="h">
        <div class="tit_index_video">
            <h1>Pasión por el empoderamiento y el reconocimiento</h1>
        </div>
        <video onloadstart="this.muted=true" autoplay loop>
                    <source src="videos/video1.mp4">
        </video>
</div>

Código CSS:

.h {
    width: 100%;
    height: 50%;
    position: relative;
}

video {
    width: 100%;
    height: 50%;
}
2
  • Puedes colocar el vídeo al 100% de ancho, pero el alto sería siempre el que corresponda con el aspect-ratio del mismo. Si quieres forzar a un alto específico se pierde esa relación de aspecto, por lo que tu video se verá extraño. Toma eso en cuenta. Saludos Commented el 9 oct. 2020 a las 9:02
  • Podrías controlar el video como background de un contenedor padre, y a ese padre puedes establecerle una altura cualquiera, de esta forma posicionas el video de forma absoluta relativa al padre. Para evitar que se "desencuadre" el video, aplicas en su CSS object-fit: cover; Commented el 9 oct. 2020 a las 17:40

3 respuestas 3

0

<style>
.hero {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 1.15rem;
    padding-top: 74px;
    padding-bottom: 66px;
    color: #fff;
    background-color: #d3d3d3;
    text-decoration: none;
    height: 100%;
    max-height: 500px;
    min-height: 380px;
    z-index: 1;
}
</style>
<div class="hero">
<center><h1>Pasión por el empoderamiento y el reconocimiento</h1></center>
<video autoplay="" loop="" muted="">
<!-- cambias esa url por tu video y tipo de video. (en tu caso sera: video/mp4) -->
<source src="https://static.pexels.com/lib/videos/free-videos.webm" type="video/webm">
</video>
</div>

Creo que eso pude servirte para guiarte:(

1
  • Ayudaría le expliques que modificaste
    – user128299
    Commented el 10 oct. 2020 a las 14:01
0

Solamente agrega un max-height al contenedor .h y overflow: hiden;

.h {
    width: 100%;
    height: 100%;
    position: relative;
    max-height: 50vh; /* si quieres que ocupe la mitad de la pantalla, sino coloca px. */
    overflow: hidden; /* escondes lo que queda de video despues del porcentaje especificado */
}

No es necesario redimencionar la altura del video. Lógicamente con esto ocultas una parte del video, por lo que no se mostrará el contenido completo del mismo.

0

Hola buena aquí tu video se ve de fondo y al mitad de tu pantalla usando height: 50vh; en el div.h y luego agregas overflow: hidden;. Lo unico malo es que se ve recortado. Espero que te sirva.

.h{
  width: 100%;
  height: 50vh;
  position: relative;
  overflow: hidden;
}

.title{
  display: flex;
  justify-content: center;
  color: white;
  position: relative;
  z-index: 1;
}

video { 
  width: 100%;
  heigth: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  object-fit: cover;
}
<div class="h">
        <div class="title">
            <h1>Pasión por el empoderamiento y el reconocimiento</h1>
        </div>
        <video autoplay= "autoplay" loop="" muted="">
          <source src="https://static.pexels.com/lib/videos/free-videos.webm"   type="video/webm">
        </video>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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