Expand the Vimeo background iframe to fit the widescreen aspect ratio

I am facing a challenge where I need to utilize some Vimeo iFrames as a video background with a widescreen aspect ratio. The problem lies in getting the iframe to expand to the full width of its parent container, disregarding its own dimensions. My current setup involves working with Tailwind in a Next.js application.

Here is the parent element, stretching across the entire width of the page...

https://i.sstatic.net/pVVz3.jpg

Meanwhile, this is how the embedded video appears at the moment:

https://i.sstatic.net/zXv5F.jpg

Any advice on how I can extend the video to occupy the full width of its parent container? Below are snippets of the JSX code for 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
/>
htmlcssreactjsiframetailwind-css

Answer №1

After some experimentation, I found a solution by setting a specific height for the iframe; in my scenario it was h-[169%], resulting in the iframe code looking like this:

<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 an alternative method (view the demo for reference). This technique ensures that videos fill their container regardless of width, maintaining their aspect ratio while potentially overflowing based on height.

  1. Ensure your container has a specific height; using 'height: auto' won't suffice. In this example, I employed a grid layout for the list container and allocated 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>
  );
}
  1. I made minimal adjustments to your project card, adding select-none to the title to prevent cursor changes upon hovering over it.

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>
  );
}
  1. To extend the video iframe beyond its containing element and fill it in both directions, utilize min-w-full min-h-full. These settings replicate min-width: 100% and min-height: 100%. Incorporating aspect-[16/9] maintains the 16:9 aspect ratio of the iframe contents. The classes 
    top-1/2 left-1/2 translate-y-[-50%] translate-x-[-50%]
    center the video 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%]"
    />
  );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble locating the name 'user' in TypeScript?

I am puzzled by the Error that I am getting, especially since other components work fine without any issues. Could the problem lie with the TypeScript interface? Details.tsx import React, { FC } from "react"; import App f ...

javascriptreactjstypescriptapitypes

Sending the $scope.master data to the subsequent form

I have a data set stored in the $scope.master array, and I have attempted to pass this information when submitting the form as shown below: <form novalidate class="css-form" method='post' action='www.example.com'> <INPUT type= ...

javascripthtmlangularjsforms

Ways to extract image URLs from HTML and use them in Java

Hi there, I am trying to retrieve the URLs for images on Bing. For example, this link returns cat images. How can I specifically obtain the .png URLs? ...

androidhtml

Unable to transform Webpage into a HTML email format

CHALLENGE AHEAD - Seeking advice on converting a webpage to an email template - SKILL LEVEL - Approaching HTML development as a beginner THE DILEMMA - How can I transform this code into a format suitable for HTML emails? What adjustments are needed in o ...

htmlnode.jsemailhtml-emailnodemailer

Refreshing a specific area on a webpage through the use of Ajax technology

I need to update a specific part of my webpage when a user clicks on the 'clear' button. I currently have some code that I borrowed from another answer I found on this site: $('.clear').click(function () { $.ajax({ url: "", ...

jqueryhtmlajaxrefresh

Difficulty displaying background image on iOS devices like iPhone and iPad

Our Magento website has a background image that expands according to the content, working well on PCs and Macs. However, the white background does not show up on iOS devices. I have attached two screenshots - one showing how it appears on a regular PC bro ...

htmlioscss

Tips on creating an inline editable cell in a Tree View

I've been working on a category tree that includes expand and collapse buttons. You can see what I have so far here: Category Tree Now, I'm looking to make each item inline editable. Can someone guide me on how to achieve this? If you want to t ...

javascriptreactjsmaterial-uidevexpress

Creating a full-width card layout with Flatlist in React Native

I'm having trouble getting my card to display full width using the FlatList Here is what it currently looks like: https://i.sstatic.net/nV94s.jpg My desired outcome is to have the card display full width like this: https://i.sstatic.net/fuguw.jpg ...

reactjsreact-nativenative-base

Tips for extracting only the phone number (excluding the country code) from MuiPhoneNumber component in React

Currently, I have integrated the MuiPhoneNumber library into my project to obtain the country code and input the phone number. However, upon submitting the form, only the country code is being returned by this field. <MuiPhoneNumber fullWi ...

reactjsmaterial-ui

I am encountering a continuous css ParserError while trying to compile my react project

I'm having trouble with the compilation of my React project. While everything runs smoothly with npm start, I encounter an error during compilation: npm run build <a href="/cdn-cgi/l/email-protection" class="__cf_ema ...

cssnpmsass

Remove a div using JavaScript

My approach involves dynamically adding div elements using JavaScript in the following manner: <div id="detail[0]"> <input name="detail.Index" type="hidden" value="0" /> <input name="detail[0].details_name" type="text" /> ...

javascriptjqueryhtml

Navigational tool Browser Router and data-fetching mechanism axios along with other necessary components

Recently, I installed 'npm i axios' along with other dependencies like react router dom on my local machine. Interestingly, instead of installing them directly in a specific directory, I ended up installing them one level above the desired folde ...

reactjsnpmdirectoryaxios

Improving Page Load Speed with HTML Caching: Strategies for Enhancing Performance when over half of the data transferred is for navigation menus

I manage a complex and expansive website that contains a significant amount of repetitive HTML elements such as the navigation menu and top ribbon. Loading a single page on my site can be resource-intensive, with up to 300KB of data required, half of whic ...

javascriptjqueryhtmlajaxcaching

Tips for aligning chart data alongside a chart that is compatible with various screen sizes

Positioning elements in CSS is presenting a new challenge for me, especially when it comes to creating a custom chart details section alongside my chart. Unfortunately, I am encountering issues with the display on different devices. While minor misalignmen ...

javascripthtmlcsschart.js

Tips for replacing all HTML comments in a JSP file with HTML comments in Eclipse

I am tasked with converting all HTML comments in every JSP file in my workspace to JSP comments. The goal is to find all without losing the comments themselves. For example: <!-- I have a comment here --> should be replaced with <%-- I have a c ...

javahtmleclipsejsp

Sending a concealed input according to the chosen option

I'm attempting to send some hidden values to a Servlet via a form, but my goal is to only pass them if the user chooses a specific option. <!-- FORM ABOVE --> <input type="hidden" name="foo" id="foo" value="foo"> <input type="hidden ...

javascripthtmlformsservletshidden-field

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

htmlcsssvg

When the parent DIV is hovered over, the image and text properties will be altered

Greetings, I am just starting out in web development and would like to seek guidance from the Stack Overflow community. Here is a link to my code: https://codepen.io/noxwon/pen/RwrmxKX My code is very basic and filled with repetitive lines. I have multip ...

jquerycss

How to modify a Python script to print in a specific div element instead of the Chrome console?

Currently conducting preliminary tests on executing a Python script within a Chrome extension. The code provided below is functional, but I am seeking assistance on how to display the value in a div element instead of logging it to the console. Unfortunate ...

javascriptpythonhtml

Aligning the .left position to make the border of a <div> synchronized

When working on my Jquery program, I encountered an issue with borders not aligning properly within the container. Specifically, in the execution (where the container is represented by a white box), the left border extends beyond the position().left proper ...

jqueryhtmlcsspositionborder