Youtubeなどの動画を埋め込んだ時のスマートフォン表示の問題を解決する方法

2012/11/14

Written by: EISUKE

Category: IT

NewImage

記事などにYouTubeなどの動画を埋め込んだ時に、PC表示だと綺麗に表示されているけど、スマートフォンだとサイズが横幅がはみ出ちゃったり、縦幅が狭かったりってありませんか？今日は、それを解決する方法を紹介します。

通常に埋め込んでむと

こんな感じで横幅が大きくなってしまい、見ようにも見れませんね(^_^;)

動画を綺麗にスマートフォン表示する方法

今回はYouTubeのiframe型の埋め込みを想定して紹介します。他の埋め込みコードでもたぶん同様にできます。

CSSにこちらの記述をします。

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

そして、Youtubeの共有ボタンから貼り付けるコードを取得して、前後に以下のハイライトになっているコードを付け加えます。

<div class="video-container"> <iframe width="800" height="450" src="http://www.youtube.com/----------/" frameborder="0" allowfullscreen></iframe> </div>

すると、あら不思議！？綺麗に表示されてるではありませんか！これって普通にiframeの横幅と縦幅を指定した時より綺麗に表示されるんでいいですよね！！