レスポンシブ対応したYouTube埋め込み

こんにちは、暇さえあればYouTubeばかり観ている管理人です。
いやー、YouTubeの勢いはすごいですね！！
YouTubeが世に登場した時は、まさかここまで世界的な動画投稿サイトになるとは思ってもいませんでした。
ところで、最近は「YouTubeの埋め込み」が実務において一般的になってきました。
大企業では商品のCMやPR動画をYouTubeに投稿することも多く、コーポレートサイト内でも動画紹介ページをよく見かけるようになりました。

また、レスポンシブウェブデザイン対応のページも業界全体に普及しており
「YouTubeの埋め込みを動画をレスポンシブ対応してほしい」という要望も数多く受けるようになりました。

ディレクター目線からすると難しく感じるかもしれませんが、技術的には非常に簡単です。
なぜならWEB業界の先輩方がCSSのみでレスポンシブウェブデザインに対応できる方法を生み出し、数分もあれば対応できる状況になっているからです。下記のようにiframeをdivで囲み、それぞれにスタイルをあてるだけでOKです。

■CSS

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

>> DEMOはこちらから！

参考にさせていただいたページ
http://www.wivern.com/report20130802.html