css 响应式iFrame

Posted 2021-05-13

<div class="iframe_container">
  <iframe src="https://www.youtube.com/embed/83VFQmGh1J0" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
</div>

/* 4x3 Aspect Ratio */
.iframe_container {
  padding-bottom: 75%;
}

.iframe_container {
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  overflow: hidden;
}

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