CODEWITHSUNDEEP
javascripthtmlcssreactjsiframe
James Lee
James Lee

Reputation: 926

How do I set my iframe height to maximum instead of scroll?

I am wondering why my code down below, my height is set to 150px. I want to set my iframe height same as my content so that I don't need to scroll.

I am using react but I assume it is the same for plain javascript and React.

MY source code:

.iframe {
  width: 100%;
  height: 100%
}
<iframe class="iframe" srcdoc="<div style='text-align: center;'>
hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
</div>"></iframe>

As you can see, I need to scroll. I want my height to be 100%. Any help would be appreciated.

Upvotes: 0

Views: 2925

Answers (2)

Jo&#227;o Garrido
Jo&#227;o Garrido

Reputation: 69

Try to put this in :

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
<div class="iframe-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

tell me if it changes something

Upvotes: 0

stephfh
stephfh

Reputation: 36

Add this function to your JavaScript and your iframe will adjust to the height of its content. 

function resizeFrame(object) {
    object.style.height = object.contentWindow.document.documentElement.scrollHeight + 'px';
  }

and call the function onload in the markup, like so: 

<iframe onload="resizeFrame(this)">{$content}</iframe>

Fiddle: https://jsfiddle.net/698pfz1w/

Upvotes: 1

Related Questions