YouTubeやVimeoなどの埋め込み動画をレスポンシブ対応させる方法

Tips

YouTubeやVimeoなどの埋め込み動画をレスポンシブ対応させる方法

割と使用頻度が高いのに毎回のように「どうするんだっけ...」となってしまうので備忘録。
YouTubeやVimeoなどのような埋め込み動画をレスポンシブ対応させる方法で、特に面倒な記述も必要なく実装できます。

YouTubeやVimeoのような埋め込み動画のレスポンシブ対応は、HTMLとCSSを下記のように記述することで実装できます。
HTMLは動画を表示させるiframediv要素で囲み、CSSはdiviframeそれぞれにスタイルを指定します。

HTML

<!-- YouTube -->
<div class="video">
  <iframe src="//www.youtube.com/embed/xxx?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<!-- Vimeo -->
<div class="video">
  <iframe src="//player.vimeo.com/video/xxx" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

※ハイライト部分は動画コードやパラメータ指定部分

CSS

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

今回はYouTube・Vimeoともにiframeを使用しているのでCSSもiframeのみを記述していますが、objectembedの場合でも同じように記述すればレスポンシブ対応させることができます。

以下は実際にYouTubeとVimeoをレスポンシブ対応して表示させているものになります。

YouTubeをレスポンシブ対応

Vimeoをレスポンシブ対応


この方法はそのままWeb Designer Wallで紹介されている方法です。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.