How do I stretch a video to fit its containing div?

[CyberiaResurrection]

Be sure to search for your issue before opening a new one.

Current Behavior

When I add a video into a container of different aspect ratio, I get grey padding blocks to the sides or above/below (depending on container's aspect ratio relative to video's aspect ratio).

Expected Behavior

The video stretched to fill the containing div, with the video's aspect ratio changed to match the containing div's.

Steps to Reproduce

The same as #145 - but I'm wanting the inverse result - video aspect ratio to match containing div's aspect ratio.

Environment

• URL attempting to play: https://youtu.be/sjeN9QdsDRQ
• Browser: Chrome 74
• Operating system: Fedora Linux 29

[cookpete]

The youtube player will always show the video at the correct ratio, regardless of the size you set the player:

You could possibly experiment with object-fit to get the result you want? https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

[matt-koevort]

@cookpete would you not have to set object-fit on the <video> element itself? If so, I'm finding it difficult to access the video element, as getInternalPlayer returns the iframe.

[PaulRGU2014]

I found the way round since I want the video to fill the height of the page and being responsive and this is an example:
on .jsx

          <div className={styles.player}>
            <ReactPlayer
              url={...}
              className={styles.player_inner}
              height='100%'
            />
          </div>

and my .scss is

.player{
position: relative;
padding-top: 100vh;
&_inner{
position: absolute;
top: 0;
left: 0;
min-width: 100% !important;
width: calc(100vh * (16 / 9)) !important;
}

[sinonymousx]

I found the way round since I want the video to fill the height of the page and being responsive and this is an example: on .jsx

          <div className={styles.player}>
            <ReactPlayer
              url={...}
              className={styles.player_inner}
              height='100%'
            />
          </div>

and my .scss is

.player{ position: relative; padding-top: 100vh; &_inner{ position: absolute; top: 0; left: 0; min-width: 100% !important; width: calc(100vh * (16 / 9)) !important; }

I am working on a nextjs13 project that had me wandering down this path of trying for hours to get the video (linked to youtube) to play with the video taking up the entire viewport - your response led me to a suitable answer:

const [calcWidth, setCalcWidth] = React.useState(null);

React.useEffect(() => {
const viewportHeight = window.innerHeight;
const aspectRatio = 16 / 9;
const newCalcWidth = viewportHeight * aspectRatio;
setCalcWidth(newCalcWidth);
}, [])

    <Box 
    sx={{ 
      position: 'absolute', 
      top: 0,
      left: 0, 
      width: '100%', 
      height: '100%', 
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      overflow: 'hidden',
    }}
  >
      {calcWidth &&
    <ReactPlayer 
      url="https://youtu.be/yourVideoHere"
      controls={false} 
      playing={true} 
      loop={true}
      muted={true}
      height="100vh"
      width={calcWidth ? calcWidth : '100vw'}
      style={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        objectFit: 'cover',
        zIndex: -20,
        opacity: 1,
      }}
    />
    }
    </Box>

[javierdebug]

Hey @sinonymousx, by any chance do you have a website or screenshot of how the end results look like? I tried but it still has some black border around in some screen sizes; I have the video as the background and some divs with text on top, so the approach might be different. I think the better option is to access the <video> tag as @matt-koevort suggested before.

[sinonymousx]

javier - thank you for the response and yes, definitely there were still some issues with certain viewports but I finally have the problem solved using a modification of my earlier method. I tried using the video tag option, myself, as you suggested, but had no luck, which is why I offer this alternative. I updated the code and this might still be over-engineered but it does handle every aspect ratio of the viewport correctly, now. I am still a fairly new developer so please correct me without reservation!

const [calcWidth, setCalcWidth] = React.useState(null);
const [playing, setPlaying] = React.useState(false);
const [windowDimensions, setWindowDimensions] = React.useState({
width: 0,
height: 0,
});

const handleResize = () => {
setWindowDimensions({
width: window.innerWidth,
height: window.innerHeight,
});
};

React.useEffect(() => {

window.addEventListener('resize', handleResize);

// Cleanup
return () => {
  window.removeEventListener('resize', handleResize);
};

}, []);

React.useEffect() => {
const viewportHeight = windowDimensions.height;
const aspectRatio = 16 / 9;
if (windowDimensions.width < viewportHeight * aspectRatio) {
const newCalcWidth = viewportHeight * aspectRatio;
setCalcWidth(newCalcWidth);
} else {
setCalcWidth(windowDimensions.width);
}
setPlaying(true);
handleResize();
}, [windowDimensions.width, windowDimensions.height])

return (
<>

{calcWidth &&
<Box
sx={{
position: 'relative',
top: 0,
left: 0,
width: {xs: '100%''},
height: '100vh',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
overflow: 'hidden',
}}
>
<ReactPlayer
url="insert your video url here"
controls={false}
playing={playing}
loop={true}
muted={true}
height={calcWidth / 16 * 9}
width={calcWidth}
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
objectFit: 'cover',
zIndex: -20,
opacity: 1,
}}
/>
<Stack spacing={1} sx={{width: '90%', mt: 30, ml: {xs: 2, md: 10}}}>
<Typography variant="h2" sx={{textAlign: 'left', fontWeight: 600, fontSize: {lg: 100}, letterSpacing: '-.4rem', textDecoration: 'none', my: 1}}>
Teaching

<Typography variant="h1" sx={{textAlign: 'left', fontWeight: 700, fontSize: {lg:200}, letterSpacing: '-.5rem', textDecoration: 'none', my: 1}}>
STEAM

<Typography variant="h3" sx={{textAlign: 'left', fontWeight: 600, fontSize: {lg:100}, letterSpacing: '-.25rem', textDecoration: 'none', my: 1}}>
and Languages

<Typography variant="body1" sx={{textAlign: 'left', fontWeight: 700, fontSize: {lg:60}, letterSpacing: '.5rem', textDecoration: 'none', my: 1}}>
for a better future



}

[javierdebug]

Hey @sinonymousx thank you so much. I think you nailed it! Your code helped me achieve the desired result. I created a demo repo for anyone needing the same; I needed to add overflow: hidden because some videos were too broad and exceeded screen size. I think this approach is the best I've achieved for background videos.

Repo: https://github.com/javierdebug/reactplayerdemo/blob/main/app/page.tsx
Preview: https://transcendent-malabi-5b1b2c.netlify.app/

[vengalreddy2000]

Hey @javierdebug @sinonymousx , thank you so much! It’s working perfectly on desktops. However, on iOS mobile devices, the layout doesn’t cover the full width on initial load. Interestingly, it adjusts and covers the full width once you scroll to the top. Could you help me resolve this issue?