【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない

動画をどーんと表示したいのですができますかー？

できますよー

1.【サンプル】動画を全画面表示にして中央に表示する

動画の上にタイトルを置いてみます。
スクロールできますー。

See the Pen
【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない by 125naroom (@125naroom)
on CodePen.

<div class="fit">
  <video src="https://125naroom.com/demo/video/itukanokoto_b.mp4" class="fitsize" preload="metadata" playsinline autoplay loop muted><p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p></video>
  <h1>【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない | 125naroom</h1>
</div>

.fit {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fitsize {
  position: absolute;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery(function($){
	var winH = $(window).height();
	//全画面表示の場所を指定する
	$('.fit').outerHeight(winH);

	$(window).on('load',function(){
		//画像、動画のクラスを決める
		setBgImg($('.fitsize'));
	});

	$(window).on('resize',function(){
		//リサイズ指定
		winH = $(window).height();
		$('.fit').outerHeight(winH);
		
		setBgImg($('.fitsize'));
	});

	function setBgImg(object){
		//画像サイズ取得
		var imgW = object.width();
		var imgH = object.height();
		
		//ウィンドウサイズ取得
		var winW = $(window).width();
		var winH = $(window).height();	

		//幅・高さの拡大・縮小率取得
		var scaleW = winW / imgW;
		var scaleH = winH / imgH;

		//幅・高さの拡大・縮小率の大きいものを取得
		var fixScale = Math.max(scaleW, scaleH);

		//画像の幅高さを設定
		var setW = imgW * fixScale;
		var setH = imgH * fixScale;

		//画像の位置を設定
		var moveX = Math.floor((winW - setW) / 2);
		var moveY = Math.floor((winH - setH) / 2);

		//設定した数値でスタイルを適用
		object.css({
			'width': setW,
			'height': setH,
			'left' : moveX,
			'top' : moveY
		});
	}
});

サンプルページはこちら

2.【サンプル】動画を全画面表示にして中央に表示する、固定背景にしておしゃれにしてみる

動画の上にタイトルを置いてみます。
動画を固定背景にして、フッターでも動画をちらりとおしゃれにしてみます。
スクロールすると違いがわかりますー。

See the Pen
【jQuery】動画を全画面表示にして中央に表示する、固定背景にしておしゃれにしてみる by 125naroom (@125naroom)
on CodePen.

<div class="bg_statement">
  <div class="fit">
    <video src="https://125naroom.com/demo/video/itukanokoto_b.mp4" class="fitsize" preload="metadata" playsinline autoplay loop muted><p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p></video>
  </div>
</div>

/*=========
.bg_statement（固定背景にする）
=========*/

.bg_statement {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

/*=========
.fit
=========*/

.fit {
  position: relative;
  overflow: hidden;
}
.fitsize {
  position: absolute;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery(function($){
	var winH = $(window).height();
	//全画面表示の場所を指定する
	$('.fit').outerHeight(winH);

	$(window).on('load',function(){
		//画像、動画のクラスを決める
		setBgImg($('.fitsize'));
	});

	$(window).on('resize',function(){
		//リサイズ指定
		winH = $(window).height();
		$('.fit').outerHeight(winH);
		
		setBgImg($('.fitsize'));
	});

	function setBgImg(object){
		//画像サイズ取得
		var imgW = object.width();
		var imgH = object.height();
		
		//ウィンドウサイズ取得
		var winW = $(window).width();
		var winH = $(window).height();	

		//幅・高さの拡大・縮小率取得
		var scaleW = winW / imgW;
		var scaleH = winH / imgH;

		//幅・高さの拡大・縮小率の大きいものを取得
		var fixScale = Math.max(scaleW, scaleH);

		//画像の幅高さを設定
		var setW = imgW * fixScale;
		var setH = imgH * fixScale;

		//画像の位置を設定
		var moveX = Math.floor((winW - setW) / 2);
		var moveY = Math.floor((winH - setH) / 2);

		//設定した数値でスタイルを適用
		object.css({
			'width': setW,
			'height': setH,
			'left' : moveX,
			'top' : moveY
		});
	}
});

サンプルページはこちら

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery（英語版）

さいごに

おー、これこれー！

動画じゃなくても画像でも使えますよーー