Stuck at max-height of 150px, YouTube or Vimeo

[marqpdx]

Current Behavior

Using the following code, i am getting a video embed that is only 150px high. The width is variable, but extends to full screen width, but height stays at 150px.

<ReactPlayer
    className='react-player'
    url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
    width='100%'
    height='100%'
/>

the css is:

.vid-wrapper  {
  position: relative;
  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

I tried adding a height=360px parameter to the player, tried it w/o the responsive wrapper, tried changing the padding-top, tried YouTube and Vimeo, and every time it is only 150px high.

The embed code for the YouTube is as follows, and the browser code inspector reveals that the height of all parent HTML elements to the video player is 600+ pixels.

<iframe width="1105" height="150" src="https://www.youtube.com/embed/ysz5S6PUM-U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Given that the embed code is 150px height, i figure the issue is not in my code (unless it is).

Expected Behavior

The video to be proper dimensions

There is a screenshot attached.

Any thoughts?

Thank you!
m

[cookpete]

There must be something weird going on with your implementation. I can plug your exact example into jsFiddle and it seems to work fine. Although note that the iframe that jsFiddle uses to render the code has height: 100%; set, and if you remove that style, the height goes to 150px.

You could try adding something like:

.react-player iframe {
  height: 100% !important;
}

[marqpdx]

@cookpete , that actually did it!! Epic. Good call. CSS often seems to fail w/ iframes so didn't think of that, but sweet,

thanks much :)
m