名古屋のIT勉強会や最新IT情報をお伝えします

ここ最近はホームページを作る時はレスポンシブ・デザインで作るケースが本当に多くなってきました。
今回はそんなレスポンシブで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指定して高さを出しています。

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

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

---