HTMLに貼ったYoutube iframeを可変にする

スマホページにYoutubeを貼る時、サイズを可変にする機会がある。下記で解決。
引用してるのは日本語サイトからだけど、元ネタは海外。
自戒も込めてますが、引用ばかり見ないでちゃんと読んどきましょう。

<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

.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%;
}

html5-css3.jp - このウェブサイトは販売用です！ - スマートフォン 編集者 方法 サイズ 日本 ツール ブラウザ テスト リソースおよび情報

最大幅指定する場合はこんな感じ。(最大幅600pxの例)

<div class="video-wrapper">
	<div class="video-container">
		<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
	</div>
</div>

.video-wrapper {
	width: 600px;
	max-width: 100%;
}

html5-css3.jp - このウェブサイトは販売用です！ - スマートフォン 編集者 方法 サイズ 日本 ツール ブラウザ テスト リソースおよび情報

ついでにHTML5

<video id="player1" width="700" height="390" controls="control" preload="none">
	<source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4" />
	<source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm" />
	<source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg" />
</video>

video {
	max-width: 100%;
	height: auto;
}

html5-css3.jp - このウェブサイトは販売用です！ - スマートフォン 編集者 方法 サイズ 日本 ツール ブラウザ テスト リソースおよび情報

デモは引用元からどうぞ。