Youtubeの動画を埋め込むことは多いと思います。

iframeのコードをそのままコピーするので、スマートフォンで見ると横幅が大きすぎてはみ出てしまう。。。

美しくないですよね。

インターネットを検索するとiframeをdivで囲んでクラスを書くってことが定番みたいなのですが、クライアント様にその作業をさせるのが心苦しい。そんなことはさせず、いつも通りに埋め込みコードをコピペするだけにしたい。

◆divで囲む方法
HTML

<div class="youtube"><iframe width="560" height="315" src="https://www.youtube.com/embed/iI1MV7jDDno" frameborder="0" allowfullscreen></iframe></div>

CSS

.youtube {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

やはり面倒だと思います。。

ですが、シンプルにこのＣＳＳを書けば自動的にレスポンシブ化できます！

◆divで囲まずにすむ方法

iframe {
width: 100%
}

なんともシンプル！意外と盲点。

ただこれだとパソコンで見たとき横が大きくなる場合があるので、スマホ用のメディアクエリに書いてください。

例えば、

@media only screen and ( max-width: 419px ) {
iframe {
width: 100%
}
}

これでdivで囲むというような、面倒くさいことをクライアント様にさせなくて済みます！