Quiero conseguir algo así ingrese la descripción de la imagen aquí

Mi idea lo resolverá esto. Crear un div con la clase principal en él tengo otra div (que es responsable del fondo) y el video. No quiero dar altura, porque quiero que sea receptivo.

<div class="parent">

  <div class="child"></div>
  <video class="video" width="auto" height="651" controls>
    <source src="https://www.youtube.com/watch?v=7TavVZMewpY">
  </video>

</div>

.parent {
  height: 100%;
  width: 100%;
  background: white;
}

.child {
  height: 50%;
  width: 100%;
  background: green;
}

.video {
  position absolute
  left: 50%
  transform: translateX(-50%);
  top: 50%;
}

Sin embargo, esta solución no funciona. El video es para todo el ancho y la altura del padre. ¿Cómo resolver este problema y cómo usar algo como en la imagen?

0
Doe 15 jul. 2019 a las 10:55

1 respuesta

La mejor respuesta

Esto debería funcionar:

  • Aplicar height:50vh a .parent. Esto lo hace que la altura sea siempre igual al 50% de la altura de su navegador.

  • Envolver su video en el .child div

  • Alinear el .child div al centro inferior usando flex

  • Aplicar transform a su .video.

.parent {
  height: 50vh;
  background: green;
  display:flex;
  /*Align video to center bottom */
  justify-content: center;
  align-items: flex-end
}

.video {
  height: 100px;
  width:200px;
  background-color: black;
  transform: translateY(50%)
}
<div class="parent">
  <div class="child">
     <div class="video"></div>
   </div>
</div>
2
Ethan Vu 15 jul. 2019 a las 09:52