HTML5の埋め込み動画で天地が切れる場合トリミングして天地中央で表示する方法

i.M.D. Staff

2015.06.16

WEB制作

フルスクリーン動画

フルスクリーン動画サイトを見てるとブラウザの左上を起点にワイド100％で表示しブラウザのサイズによっては動画の下をカットして表示しているケースが殆どでした。

また、動画をバックグラウンド扱いにしてz-indexで最下層にしているケースが多く、タブレットやスマートフォンで閲覧した場合、動画再生ができずに代替えの静止画像を表示するパターンが多く見受けられました。

フルスクリーン動画をサイトで表示する場合ブラウザの全画面表示では16:9の比率で表示できないため天地をカットして天地中央で表示できた方が見てて違和感がないかなと思ったのでjQueryでCSS制御スクリプトを組んでみました。

動画の上にオーバーレイ表示さえしなければ、タブレットやスマートフォンで画像をクリックすることで動画の再生が可能です。

ワンカラムのリキッドデザインでサイト作る際に結構使えるかなと思います。

ちなみに今回サンプルで使っている動画はNHKの「CREATIVE LIBRARY」で提供されている動画のフリー素材を使っています。
http://www1.nhk.or.jp/creative/

【サンプル】

◆CSS制御スクリプト
HTMLソースを読み込んだ時とブラウザをリサイズした時にブラウザの表示高さを取得し、
高さが16:9の比率以下の場合天地をカットする処理を行っています。


<script type="text/javascript">
$(document).ready(function(){
	Resize();
});

$(window).resize(function(){
	Resize();
});

function Resize() {
  //ブラウザの横サイズを取得
	var ww = $(window).width();
	
	//動画の縦サイズを割り出す
	//var wh1 = $("video#bgv").height();
	//ブラウザの縦サイズを取得
	var wh2 = $(window).height();
	
	//ブラウザの縦サイズより動画の表示縦サイズが大きい場合、
	//ブラウザの縦サイズをdivの高さに指定する。
	//それ以外は動画の表示縦サイズをdivの高さに指定する。
	if (wh1 > wh2) {
		wh = wh2;
	} else {
		wh = wh1;
  }

  //動画の縦サイズがブラウザはみ出す場合カットする
  //ピクセル数を割り出す。
	if ((wh1 - wh) > 0) {
		sp = 0 - (wh1 - wh) / 2;
	}

	//表示するサイズをCSSにセット
	$("div.vd").css('height',wh1);
	
	//はみ出すピクセル数をCSSにマイナス値でセット
	$("video#bgv").css('margin-top',sp);
}
</script>

◆動画表示CSS


<style type="text/css">
video,body {
	margin: 0;
	padding: 0;
}
div.vd {
	margin: 0;
	padding: 0;
	//はみ出す動画を非表示に
	overflow: hidden;
}
div.vd video#bgv {
  width: 100%;
  height: auto;
}
</style>

◆動画表示HTML


<div class="vd">
<video id="bgv" poster="movie01.png" onclick="this.play();" autoplay>
  <source src="movie01.mp4" type="video/mp4" />
</video>
</div>