How to make the Iframe responsive?

Open josuablejeru opened this issue 4 years ago • 6 comments

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!

Apr 30 '20 19:04 josuablejeru

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"} />

May 05 '20 06:05 redshoga

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

May 06 '20 18:05 josuablejeru

@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!