Stretch Vimeo background iframe to widescreen aspect - html

Question

I need to use some Vimeo iFrames as a video background with a widescreen aspect ratio. I'm having trouble getting the iframe to stretch to the full width of the parent, ignoring it's own dimensions to stretch out. I'm working with Tailwind in a Next.js app.
This is the parent, stretching the full width of the page...
And this is how the embed is looking right now:
How can I stretch the video to the full-width of it's parent? Here's the JSX of my components:
ProjectCard.tsx
<div className="group relative flex aspect-widescreen items-center justify-center overflow-hidden">
<h3 className="absolute z-10 mx-auto text-center font-serif text-sm uppercase tracking-[15px] text-white opacity-0 transition-opacity duration-700 group-hover:opacity-100 md:text-3xl md:tracking-[1.5625rem]">
{asText(project.title)}
</h3>
<Image
src={getImageUrl(project.cover.widescreen.url)}
width={project.cover.widescreen.dimensions?.width}
height={project.cover.widescreen.dimensions?.height}
alt={asText(project.title)}
className="w-full"
placeholder="blur"
blurDataURL={getBlurUrl(project.cover.widescreen.url)}
quality={100}
/>
{preview ? <ProjectPreview preview={project.preview} /> : null}
</div>
ProjectPreview.tsx
<iframe
src="iframeSrc"
className="absolute inset-0 aspect-widescreen h-full w-full overflow-hidden object-fill"
allowFullScreen
/>

Answer 1

I was able to get this done by just adding a fixed height to the iframe; in my case it was h-[169%], so the iframe looks like this now:
<iframe
src="iframeSrc"
className="absolute h-[169%] min-h-full w-auto min-w-full max-w-none opacity-100 transition-opacity duration-700 group-hover:opacity-100"
allowFullScreen
/>

Answer 2

Here is another approach (see demo here). This causes the videos to fill their container regardless of the width. The videos retain their aspect ratio, but will overflow the container depending on the height.
Make sure that your container has an explicit height. Height auto won't cut it. Here I used grid on the list container and set each row to have a height of 25vh:
function ProjectsList({ projects }) {
return (
<div className="list | grid auto-rows-[25vh]">
{projects.map((project) => (
<ProjectCard project={project} key={project.preview} />
))}
</div>
);
}
I didn't change your project card except to add select-none to the title so the cursor doesn't change when you hover over the title.
function ProjectCard({ project }) {
return (
<div className="card | group relative flex items-center justify-center overflow-hidden">
<h3 className="title | select-none absolute z-10 mx-auto text-center font-serif text-sm uppercase tracking-[15px] text-white opacity-0 transition-opacity duration-700 group-hover:opacity-100 md:text-3xl md:tracking-[1.5625rem]">
{asText(project.title)}
</h3>
<Image
src={getImageUrl(project.cover.widescreen.url)}
width={project.cover.widescreen.dimensions?.width}
height={project.cover.widescreen.dimensions?.height}
alt={asText(project.title)}
className="w-full"
placeholder="blur"
blurDataURL={getBlurUrl(project.cover.widescreen.url)}
quality={100}
/>
{project.preview ? (
<ProjectPreview preview={project.preview} title={project.title} />
) : null}
</div>
);
}
To force the video iframe to expand outside of its containing element and fill it in both directions, you can set min-w-full min-h-full. This is the equivalent of setting min-width: 100% and min-height: 100%. Using aspect-[16/9] will make the iframe contents retain its aspect ratio of 16:9. The top-1/2 left-1/2 translate-y-[-50%] translate-x-[-50%] classes, make the video center itself within its container.
function ProjectPreview({ preview, title }) {
return (
<iframe
src={`https://player.vimeo.com/video/${preview}?background=1&autoplay=1&loop=1&byline=0&title=0`}
frameBorder="0"
title={title}
className="video | aspect-[16/9] min-w-full min-h-full absolute top-1/2 left-1/2 translate-y-[-50%] translate-x-[-50%]"
/>
);
}