css 响应式嵌入式视频

Posted 2021-05-13

<div class="video-wrapper">
  <iframe></iframe>
</div>

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
}

.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


/*
To Calculate the padding %age do the following: 

Given the video with an aspect ratio of 16:9

padding-bottom: ((9/16) * 100) %
*/