Roroa.

こんにちは、kazikiです。

最近動画をフルスクリーンで表示するサイトが多いのでそのやり方をメモしておきたいと思います。

フルスクリーンのコード

まず、htmlで以下ようになっているとします。

<div class="visual">
	<div class="movie">
		<video src="movie.mp4" autoplay muted loop playsinline type="video/mp4"></video>
	</div>
</div>

次にcssはこうします。

.visual {
	position: relative;
	width: 100%;
	height: 100vh;
}
.movie {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.movie video {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}

コードの解説

visual要素

まず.visualをブラウザ幅100%にし、高さを100vhにします。これで画面フルサイズになります。
※iphone等の場合、ツールバーで要素の下部が隠れたりするのでご注意ください。

そしてposition: relative;で中の要素.movieの基準を.visualにしてあげます。

movie要素

次に.movieをposition: absolute;のtop: 0; left: 0; width: 100%; height: 100%;にします。

すると先ほど.visualにposition: relative;を設定しているので、どの人を基準に上0左0で、100%にするかと言うと.visualになります。

なので、.visualの幅・高さに対して、.movieは上0左0の位置で100%になります。

movie要素のvideo

最後にvideo要素です。
videoも.movie同様にposition: absolute;にします。ちなみにvideoの基準は直近でposition: absolute;を持っている.movieになります。

次にvideoをtop: 50%; left: 50%;にします。

こんなイメージです。

そして次にtransform: translate(-50%,-50%);で真ん中にします。これはtransform: translate(-50%,-50%);が設定されているvideo要素の幅50%と高さ50%分、上に左に移動と言うことになってますので中央に移動します。

そして最後はwidth: auto; height: auto; min-width: 100%; min-height: 100%;です。
これにより幅・高さ動画データの比率でOKだけど、（autoだから）幅と高さの最小値は基準の.movieの100%ね！といことになります。

.movieは.visualのサイズを真似するのでウィンドウを可変してもフルスクリーンなのでvideo要素の最小値がフルスクリーンサイズになります！

最後にちょっと注意

あまりないのですが、元動画のサイズが大きすぎるとフルスクリーン？って感じになりますので注意です。
仮に動画サイズが3000や4000だった場合、最小値が100%なので最大は青天井です！なので、動画が「大きすぎて真ん中の一部しか見えない！」なんてこともあるのでその際は、小さくしてあげた方が良いかもです。（ファイルサイズ的にも）