Ask coding questions

← Back to all posts
How do you make an responsitve iframe?
Zeleninemail (2)

How do you make an responsitve iframe? Answer below

Answered by ch1ck3n (1553) [earned 5 cycles]
View Answer
Comments
hotnewtop
ch1ck3n (1553)
<div class="container"> 
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

css:

.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}