Mon, August 29, 2016

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

YoutubeやHTML5video等の埋め込み動画のサイズをcssを使って動的にリサイズ/可変にするトリックをご紹介します。
解像度の違うスマートフォン(iPhone / Android)、IEにも適用されるようです。

■CSS: Elastic Videos

■Youtube(iframe版)のコードサンプル
<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%;
}

デモを見る

埋め込み動画の最大幅(max-width)を指定する場合は、さらにdivで囲み下記のように記述します。
※最大幅を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%;
}

デモを見る

■HTML5videoのコードサンプル
<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;
}

デモを見る

シンプルなトリックですが、とても有用ですね。

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree