【5秒実装!!】CSSでYouTubeの埋め込みをレスポンシブ対応に！！

YouTubeの埋め込みをレスポンシブ化する方法

YouTubeの<iframe>タグで埋め込みをすると、レスポンシブ対応になっていないため、スマホで閲覧した際にサイトからはみ出してしまいます。
下記のコードをhtmlファイルとcssファイルにコピペすればYouTubeの埋め込みもレスポンシブ対応になります。

下記コードをコピペで実装

CSS

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

html

<div class="youtube">
  <!--ここにiframeの埋め込みコード-->
</div>

これでYouTubeの埋め込み動画もブラウザの画面からはみ出ることなく表示可能です。
工夫して使用すればYouTube以外の埋め込みコードにも使用出来ます。レスポンシブ対応させることは今や常識になってきてますので是非ご活用ください。