How to make ReactPlayer scale with height and width - css

Question

I am using reactplayer for a youtube video which uses iframe. I am trying to scale the video to my div and I want it to be responsive.
I put a width and height at 100% on the ReactPlayer, and I have a wrapper div that I put height and width on, but the reactplayer does not fit the div. It is stuck at a height of 150px no matter how I resize the screen.
<div className="video-wrapper>
<ReactPlayer
width="100%"
height="100%"
url="https://youtu.be/BGhqlJnFIXU"
controls
muted
config={{
youtube: {
playerVars: { showinfo: 1 }
}
}}
/>
</div>
.css
.video-wrapper {
height: 100%;
width: 100%;
min-height: 225px;
}

Answer 1

This can be easily achieved by further-extending your CSS. Since most videos are shot in 16:9, following this guide by Chris Coyier will make the process easily achievable.
Since you're utilizing React-Player, I am working with the content located on their demo page.
.player-wrapper {
width: auto; // Reset width
height: auto; // Reset height
}
.react-player {
padding-top: 56.25%; // Percentage ratio for 16:9
position: relative; // Set to relative
}
.react-player > div {
position: absolute; // Scaling will occur since parent is relative now
}
Why it works?
TL;DR - Padding in percentages is based on width. By setting an element's height to 0, we can utilize a percentage for 'padding-top' to scale content perfectly.
Generate 16:9's Percentage
(9 / 16) * 100 = 56.25

Answer 2

To force react-player be fully responsive I did the following:
CSS
.player-wrapper {
position: relative;
padding-top: 56.25%; /* 720 / 1280 = 0.5625 */
}
.react-player {
position: absolute;
top: 0;
left: 0;
}
JSX
import React from "react";
import ReactPlayer from "react-player";
import "./Player.css";
const Player = () => (
<div className="player-wrapper">
<ReactPlayer
url="https://youtu.be/3eLrINg3O2Q"
className="react-player"
playing
width="100%"
height="100%"
controls={false}
/>
</div>
);
export default Player;

Answer 3

The Easiest way to make the it responsive is adding the widht as 100%
<ReactPlayer
controls
pip
width="100%"
url={_post.videolink}
/>

Answer 4

you can fill with:
.react-player > video {
position: absolute;
object-fit: fill;
}

Answer 5

For a more modern approach, just add a class to the react player component and set it to:
height: auto !important;
aspect-ratio: 16/9;
https://caniuse.com/mdn-css_properties_aspect-ratio

Answer 6

you can keep the width fixed and then allow the height to adjust according to the video height as different video has its own size like 100*200.
.video-wrapper > video { width: 55vw; height: min-content; }

Answer 7

Here's how I did it.
video { object-fit: cover; }
Now, the size of the video can be adjusted by sizing the wrapper.

Answer 8

If you are using Tailwindcss and Swiper you can use this code
This code implements the last aspect-video class to ensure the aspect ratio always be correct
And also ensure that if the user scroll to the next page, the previous player gets paused
You can also set Max width of videos , here its "max-w-6xl"
import React, { useEffect, useState } from 'react'
import ReactPlayer from 'react-player'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from "swiper";
const videos = [
{
id: 1,
url: "https://www.youtube.com/watch?v=1234"
},
{
id: 2,
url: "https://www.youtube.com/watch?v=1234"
},
{
id: 3,
url: "https://www.youtube.com/watch?v=1234"
}
];
const IndexHero = () => {
const [domLoaded, setDomLoaded] = useState(false);
const [isPlaying, setIsPlaying] = useState(null);
useEffect(() => {
setDomLoaded(true);
}, []);
return (
<>
<div className='h-auto'>
{!domLoaded && (
<div className="flex items-start justify-center">
<div className="flex-1 max-w-6xl">
<div className="aspect-video">
{/** For CLS */}
</div>
</div>
</div>
)}
{domLoaded && (
<Swiper
modules={[Pagination]}
pagination={true}
className="h-full "
onSlideChange={() => {
setIsPlaying(null);
}}
autoplay={false}
watchSlidesProgress={true}
>
{videos.map((data) => (
<SwiperSlide key={data.id}>
<div className="flex items-start justify-center">
<div className="flex-1 max-w-6xl">
<div className="aspect-video">
<ReactPlayer
key={data.id}
url={data.url}
width="100%"
height="100%"
controls={true}
onPlay={() => {
setIsPlaying(data.id);
}}
playing={isPlaying === data.id}
/>
</div>
</div>
</div>
</SwiperSlide>
))}
</Swiper> )}
</div>
</>
);
};
export default IndexHero;