はじめに

レスポンシブサイトにYouTube動画を埋め込んだはいいけど縦横比率がなんかおかしい...なんて経験はありませんか? iframeに正確な高さと幅を与えてあげないとそうなってしまいます。今回はそんな悩みを解決するTipsです。

DEMO

まずは、レスポンシブになっていることを確認してください。 DEMO

実装していく

▼HTML
<div class="video-container">
  <iframe src="https://www.youtube.com/embed/5RyO2tfKzJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen><iframe>
<div>
まずは、iframe を div でラップします。 ▼SCSS
.video-container {
  overflow: hidden;
  position: relative;
  width:100%;
  &:after {
    padding-top: 56.25%;
    display: block;
    content: '';  
  }
  &>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
padding-top: 56.25%;がポイントです。YouTube動画のアスペクト比が 16:9 なので 56.25% を指定しています。

さいごに

ビデオが 4:3 の場合は 75% に設定するなど、比率が違う場合でも使えます。

参考ページ

https://flaviocopes.com/responsive-youtube-videos/