[FIXED] How to make ReactPlayer scale with height and width

Issue

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;
}

Solution

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

Answered By - Ryne

Answer Checked By - Willingham (PHPFixing Volunteer)