>  > Youtube動画をレスポンシブサイトに埋め込む方法

Youtube動画をレスポンシブサイトに埋め込む方法

2014.04.10

レスポンシブで動画を埋め込む

ここ最近はホームページを作る時はレスポンシブ・デザインで作るケースが本当に多くなってきました。
今回はそんなレスポンシブでWEBサイトを作る時のちょっとしたテクニックをご紹介します。

Youtube動画がレスポンシブにならない時

ホームページにYoutubeを載せる機会も多いと思います。
youtubeの場合、簡単にホームページに貼り付けることができるので便利なのですが、レスポンシブサイトだと少しだけ調整する必要があります。

といいますのも、Youtube動画はiframeを使って表示させており、そのまま貼り付けがだけではスマホなどで見た時でもサイズが小さくならずにはみ出てしまいます。

レスポンシブで動画がはみ出る

このようにかなりみっともないですよね。

そんな時はCSSで調整をしてあげましょう。
以下にサンプルソースを掲載しておきます。

まずyoutubeの埋め込みコードを適当なclassをつけたdivで囲います。
今回はmovieクラスをつけました。
<div class="movie">
<iframe width="560" height="315" src="//www.youtube.com/embed/iCcTRQFhbNs?rel=0" frameborder="0" allowfullscreen>
</div>

そしてスタイルシートにそのmovieクラスとiframeのスタイルをつけます。
.movie {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
}
iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

padding-bottom: 56.25%;
と設定しているのは、youtubeの画面の縦横比が16:9になっていますので、これはすなわち1:0.5625となり、その分をpaddig指定して高さを出しています。

サイトを確認してみると、レスポンシブに対応しているのがわかります。

youtube動画がレスポンシブに収まる

画面内にきっちりと収まっています。
*間違い等ありましたらご連絡いただければ幸いです!


WRITER

ライター紹介

ネッタン編集メンバー

JunKimura
木村純
ネッタンサイトの管理人です。

得意のジャンル:WEBマーケティング、SEO

Website:http://istyle.info/
Twitter:https://twitter.com/kimura_j
Facebook:
Google+:

NEW TOPICS

最新記事

カテゴリ一覧

ネッタンTwitter

最新IT情報メルマガ

MENU

サイトについて