How to make the Iframe responsive?

[josuablejeru]

Responsive Iframe

Hi first I want to thank you for your work, it has really an easy api to work with!

Here my question:
I had a really hard time try to make the iframe responsive on mobile and desktop. Did anyone have an Idea how we could implement a autoresize feature to this Component so you can make it responsive by a prop?

(If it is not possible... can anyone give me a hint how to make my iframe responsive in a material-ui card?)

Thanks for your time!

[redshoga]

It could be implemented by using containerClassName props.

.youtubeContainer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}

.youtubeContainer iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

<YouTube videoId="2g811Eo7K8U" containerClassName={"youtubeContainer"} />

[josuablejeru]

@redshoga Thank you for taking the time to answer my question!

[iiiok]

@redshoga got a real good solution for this component.
I tried useFre, ReactDOM.findDOMNode, node.getBoundingClientRect().width. Node of them works for me.

CSS solution rocks!

[MichaelDimmitt]

@josuablejeru , is this issue ready to be closed?
Or is there something still pending?

[ruisaraiva19]

@MichaelDimmitt the comment above from @redshoga works as expected. This issue is style related and doesn't concern YouTube Player API.

[crysfel]

@redshoga your css solution works great, thanks!!

[juxuanu]

containerClassName does not exist. What should be used?

[DjakaTechnology]

containerClassName does not exist. What should be used?

try className