Tengo un módulo en mi aplicación Nextjs que muestra eventos que se están transmitiendo en vivo actualmente. Dentro de este módulo, tengo una vista previa de la imagen con un botón de reproducción que, cuando se hace clic, lo lleva al evento en vivo.

Sin embargo, lo que me gustaría hacer es que esta vista previa sea el video de Vimeo para el evento, de modo que muestre una vista previa del video. Eso es bastante fácil de hacer, puedo obtener el código de inserción para el video de Vimeo de la API de eventos, pero tengo problemas para que se extienda a todo el ancho y la altura de este rectángulo. Así es como se ve en este momento:

Esencialmente, no puedo encontrar los estilos correctos para que se estire a esta proporción, de manera similar a la imagen. No me preocupa lo que se corta o no, solo quiero usar el video como fondo.

Esto es lo que tengo hasta ahora (estoy usando los módulos Nextjs y SASS):

El HTML en el componente:

 <div className={s.liveStream__player}> <Link href={`/events/${live.event_id}`} title="Play" className={s.liveStream__play}> <PlayButton /> </Link> <iframe src={`https://player.vimeo.com/video/${vimeoId[1]}?background=1`} className={s.liveStream__preview}/> </div>

Y el SASS:

 .liveStream { &__play { position: relative; z-index: 10; } &__player { display: flex; height: 100%; width: 100%; flex-grow: 1; align-items: center; justify-content: center; position: relative; overflow: hidden; } &__preview { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; } }

¿Hay una manera fácil de lograr esto y hacer que el iframe se estire al ancho y alto completo del padre?