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

2012/11/14
Written by: EISUKE
Category: IT

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

通常に埋め込んでむと

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


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

今回は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>

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


動画の貼り付けにはBookMarkLetを使おう!

毎回にように、わざわざ上のようにコードを付け足すのは面倒です。それだったら、最初から埋め込まれたコードを生成できれば便利!なので、@feelingplaceさんのVideo2htmlを使うのがベストです!

YouTube・Vimeo・TEDから動画埋め込み用コードとサムネイル画像を取得するブックマークレット『Video2HTML』の対応サービスを追加しました。 | Feelingplace
ブックマークに登録するだけで、即座に埋め込みコードを取得出来るぞ!!

NewImage

このようにカスタマイズして書いてあげれば、ブックマークレットを起動するだけでOKLAHOMAですね!!いやー便利!便利!

via : YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法 | HTML5 – CSS3 mag


Back To Top