0
267
ViewsStretch an iframe with width and height of parent
I've got a module in my Nextjs app that shows events that are currently being live-streamed. Within this module I've got an image preview with a play button that, when clicked, takes you to the live event.
What I'd like to do, however, is have this preview be the Vimeo video for the event, so it shows a video preview. That's easy enough to do, I can get the embed code for the Vimeo video from the events API, but I'm having trouble getting it to stretch into the full width and height of this rectangle. This is how it's looking right now:
Essentially, I can't figure out the correct styles to get it to stretch to this ratio, similarly to the image. I'm not concerned with what is being cut off or not, I just want to use the video as a background.
Here's what I've got so far (I'm using Nextjs and SASS modules):
The HTML in the component:
<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>
And the 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;
}
}
Is there an easy way to accomplish this and get the iframe to stretch to the full width and height of the parent?
1 answers
Answer question0
You have missed one property to stretch iframe (height):
.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;
// make sure wrapper has necessary sizes
// min-height: 100vh;
// just for example purposes:
height: 300px;
width: 300px;
}
&__preview {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
// add height prop to stretch iframe to parent height
height: 100%;
}
}
Also make sure wrapper has necessary sizes.