読者です 読者をやめる 読者になる 読者になる

godmemo

デザイン/WEB屋のメモです。自分用

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

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

Youtube   

photo:Esther Vargas www.flickr.com 

 

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

 

 

f:id:godspade:20150915102306p:plain

PC表示 

youtube窓(上)iframe+レスポンシブ用CSS実装 (下)iframeのみ

f:id:godspade:20150915102313p:plain

スマホ表示 

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に入れておいても良いですね!