web-dev-qa-db-ja.com

YouTubeビデオを埋め込むときの自動高さ？

youTubeビデオをウェブサイトに埋め込みましたが、問題は、ビデオの幅とアスペクト比に基づいて高さを自動的に調整する必要があることです。したがって、幅が1280の場合、ビデオが16：9であれば高さは720になります。 「VW」および「VH」ユニットを使用してみましたが、これらはiframeで動作しないようです。私の幅はすでに比例して設定されています。

私のコードは以下です：

<iframe style="margin-right: 1%; margin-left: 1%;" width="98%" height="" src="https://www.youtube.com/embed/HwzQbfde-kE" frameborder="0"></iframe>
htmlcssvideoyoutube
18
Dominic Newman

このコードで解決できます。 実例リンク

CSS：

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

サンプルHTML

<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
15
MD Ashik

質問はRedditユーザー 'mr_bacon_pants'によって解決されました こちら

9
Dominic Newman

vw on bothスタイル要素の幅と高さを使用してレスポンシブiframeサイズを作成することができました。これは、要素に使用する水平幅の量がわかっているため、計算します幅とビデオが16：9であるという知識に基づく高さ。ビデオが画面サイズ893pxより上の水平スペースの45％、それ以外の場合90％を消費するようにしたい場合は、次のようにします。

.embedded-video-16-9 {
  width:  90vw;
  height: 50.625vw; /* 90*9/16 */
  margin-left: 5vw;
  margin-right: 5vw;
}

@media (min-width: 893px) {
  .embedded-video-16-9 {
    width: 45vw;
    height: 25.3125vw; /* 45*9/16 */
    margin-left: 2vw;
    margin-right: 2vw
  }
}

次のように使用：

<iframe 
  class="embedded-video-16-9" 
  src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" 
  frameborder="0" 
  allowfullscreen=""
></iframe>
0
Ross Rogers