Youtube:嵌入式视频压缩

Question

我正在通过iFrame API嵌入一个youtube视频。视频本身是方形的，它的宽度和高度取决于容器的大小(一个方形，还有流体尺寸)--我正在使用CSS来实现这一点。

一切正常，但在视频的开头和结尾(开始和停止之前)，内容以缩小的宽度显示，显示黑边栏。

​

​

知道为什么会发生这种事吗?该怎么办？是否有人在响应性布局的背景下制作了不规则形状的视频？

更新

将宽度和高度设置为101%似乎有帮助。不过还不确定到底有多一致。

Answer 1

 <div class="video_iframe_wr">
    <iframe/>
 </div>


  .video_iframe_wr {
  height: 0;
  padding-bottom: 100%; /* that makes height = width */
  position: relative;
}

.video_iframe_wr > iframe {
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  width:100%;
  height:100%;
}