How do create a Responsive IFrame

parksdesign
09-11-2017 16:13

<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com" allowfullscreen></iframe>
</div>

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

Average rating: 0 (0 Votes)

You cannot comment on this entry