css - 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%;
}