簡単にYouTube・VimeoをレスポンシブデザインにするCSSとコード

YouTubeやVimeoをPCでもスマホでもジャストサイズで表示させたい時のCSSとhimlコード

   

photo:Esther Vargas www.flickr.com 

結構初歩的なところですが、YouTubeやVimeo動画をサイトに埋め込むとき、取得したiframeの埋め込みコードにはwidthとheightが指定されているので、そのまま貼り付けると下記のようにサイズが固定されてしまってスホマ表示のときにはみ出てしまうということがあります。

PC表示　

youtube窓（上）iframe＋レスポンシブ用CSS実装　（下）iframeのみ

スマホ表示　

youtube窓（上）iframe＋レスポンシブ用CSS実装　（下）iframeのみ

スマホ表示で（下）iframeのみの表示が切れてますね。

それでは、YouTubeやVimeo動画をレスポンシブにしてみましょう。
iframe要素をdivで囲み"youtube-container"でスタイル指定するだけです！非常に簡単
HTML

<div class="youtube-container">
<iframe src="https://www.youtube.com/embed/jqYxyd1iSNk" width="800" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

CSS

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

これでレスポンシブにできます。

padding-bottom: 56.25%;　　についてはこちらのサイトに説明があります

親（div）要素にpaddingを設定
iframe要素のオリジナルサイズ（横幅&高さ）からアスペクト比を算出してpadding設定します。
padding-topでもpadding-bottomでもどちらでもOKです。
HD動画（16:9）の場合は、100 / 16 * 9 = 56.25% となります。
iframe要素（Youtubeなど）のレスポンシブ対応 | HTML5/CSS3, JavaScript 次世代WEB研究開発

簡単な作業なので、デフォルトでcssに入れておいても良いですね！