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

  • Posted on
  • Category : 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で紹介されている方法です。

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。