Can't set width and expect proportional auto height, nor vice versa

[ronenmagid]

This component forces pre-knowledge of the exact video size or it cannot work.

I have a 500px width available for it, but specifying 500px width alone gives you a very short height, that's completely non-proportional to the width.

[ndom91]

@ronenmagid whats the problem with also setting the height beforehand?

A youtube video is always 16:9, so if you have 500px width available for it, just specify a height of 281px

[MichaelDimmitt]

@ronenmagid The Iframe that the project uses has an id called widget2

Add this change to your css file. 🙂

#widget2{
  height: 100vh
  width: 100vw
}

Or however you want to set the height and width dimensions for mobile responsiveness.

Kind of a hack but it gets the job done.

[MichaelDimmitt]

Turns out the widgets were dynamic. So when javascript was generating a new iframe it would increment the widget id.

to get around this I put the styling on iframe as a whole. Understanding this is not a good solution if you have more than one iframe on a page.

iframe{
  height: 100vh;
  width: 100wv;
}

[MichaelDimmitt]

Really the component should accept styles as props to be added to the parent div and the iframe. 🤷‍♂️

[ruisaraiva19]

@MichaelDimmitt you can check out this comment with a solution for making the iframe responsive.

[MichaelDimmitt]

@ronenmagid , consider looking at https://github.com/tjallingt/react-youtube/issues/242 as ruisaraiva19 mentioned #242

[rekliner]

another solution that works well enough but not ideal since the size will bounce: width can be set to 100% and responds to container size. when the onReady event fires check getSize(), which is part of the YouTube API but undocumented. Use the width from getSize to calculate width for 16:9 and send it to setSize()

<YouTube
   onReady={(e) => {
      const { width, height } = e.target.getSize();
      e.target.setSize(width, width / 16 * 9)
  }
...
/>

Unfortunately getSize is not officially in the Youtube iframe API so its not in the type definitions...but it works!