youtube楽しいですよね。
サイトに動画をうめこみたい場合、youtubeにアップして、
youtubeの画面から埋込コードを取得して埋め込むのが簡単です。

しかし、取得したコードをそのまま埋め込むと、、、
固定幅になってしまって、レスポンシブ対応してくれません。。
そういった場合は、埋込コードをdivでくくって、heightを0にしておいてpadding-topかbottomを%で指定すると
グッドな感じでレスポンシブしてくれます＾＾
paddingを%で指定する場合、もとになる数字はその要素の横幅になります。
なので横幅が伸び縮みすると、paddingも自動的に伸び縮みしてくれるっていう仕組み。

具体的にコードを書いてみます。

<div class="movie-wrap">
  <div class="movie">
   ここからiframeの埋込コード
  </div>
</div>

.movie {
position: relative;
width: 100%;
padding-top: 56.25%;
height: 0;
}
.movie iframe {
position: absolute;
top: 0;
left: 0;
widh: 100%;
height: 100%;
}

これって最近よくある、アイキャッチをhoverでズームインさせたりするやつ、
ブロックをwidth、heightの値を指定しなきゃいけなかったりするときとか、
横幅は%指定すればなんとでもレスポンシブできるけど、縦横比を維持しながらレスポンシブさせたいときは
これがとっても役立ちます＾＾

●参考記事
Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法

• CODING
• CSS