フルスクリーン動画ヘッダー – サンプルソースコード(BootStrap版 ※コピペ、使用ともにフリー)

先に作成しましたフルスクリーン動画ヘッダー(HTML版)は、BootStrapがインストールされた環境においては相性が悪く(モバイルレスポンシブ時に右側に余白が生じてしまう)、「じゃあ、BootStrap版も作ってしまえ」と思い立ち、早速、BootStrap版を作成いたしました。

BootStrap版の方がソースコードが短くて済み、また、ナビゲーションも取り入れやすいと思います。

仕様

特徴レスポンシブ対応。画面サイズが切り替わっても動画中央部分が常時画面中央に配置されるように設定しており、ブラウザ画面一杯に動画が表示される。
使用コンピューター言語HTML、CSS、JavaScript
フレームワークBootStrap5
対応ブラウザ現行の各種ブラウザ(エッジ、クローム、OPERA、ファイアーフォックス、サファリ)
ライセンス動画ライセンスについて
「Pexels」(https://www.pexels.com/ja-jp)の無料動画を使用している。
●ソースコードライセンスについて
100%GPLとします。
使用動画MPEG4、フレーム幅1920×フレーム高1080
推奨動画サイズ動画のフレーム構成にもよりますが、フレームサイズは幅2000×高1000前後が良いと思われます。
使い方コピペして適当に書き換えてお使いください。尚、ソースコード中の動画「フレーム幅」と「フレーム高」の数値、および「動画のパス」は必ず書き換えてお使いください。

フル画面動画ヘッダーのサンプルソースコード(BootStrap版)

<doctype html>
<html lang="ja">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>フル画面動画ヘッダーのサンプルコード(BootStarp版 ※自由にコピペ、使用OK)</title>

		<!-- Bootstrap CSS -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

		<!-- 動画処理用JS -->
		<script>
			//動画サイズの定義
			const mw = 1920;	//動画フレーム幅。使用する動画サイズに応じて数値を書き換える。
			const mh = 1080;	//動画フレーム高。使用する動画サイズに応じて数値を書き換える。

			//ページ読み込み時の動画表示の動的処理
			window. addEventListener('DOMContentLoaded', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.classList.add('top-50');
					headerMp4.classList.add('translate-middle-y');
					headerMp4.classList.remove('start-50');
					headerMp4.classList.remove('translate-middle-x');
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.classList.add('start-50');
					headerMp4.classList.add('translate-middle-x');
					headerMp4.classList.remove('top-50');
					headerMp4.classList.remove('translate-middle-y');
				}
			});

			//ウィンドウリサイズ時の動画表示の動的処理
			window.addEventListener('resize', () => {
				const ww = innerWidth;
				const wh = innerHeight;

				const headerMp4 = document.querySelector('#headerMp4');

				if((ww / wh)>=(mw / mh)){
					headerMp4.style.width=ww+'px';
					headerMp4.style.height='auto';

					headerMp4.classList.add('top-50');
					headerMp4.classList.add('translate-middle-y');
					headerMp4.classList.remove('start-50');
					headerMp4.classList.remove('translate-middle-x');
				}
				else{
					headerMp4.style.width='auto';
					headerMp4.style.height=wh+'px';

					headerMp4.classList.add('start-50');
					headerMp4.classList.add('translate-middle-x');
					headerMp4.classList.remove('top-50');
					headerMp4.classList.remove('translate-middle-y');
				}
			});
		</script>
	</head>

	<body>
		<header>
			<div class="w-100 vh-100 overflow-hidden">
				<video id="headerMp4" playsinline="" autoplay="" loop="" muted="" src="test4.mp4" class="position-relative"></video>
			</div>

			<div class="position-absolute top-50 start-50 translate-middle" style="z-index:1;">
				<h1 class="container display-6 text-white">貴社ウェブサイトを、ダイナミックで迫力のあるフル画面動画に</h1>
			</div>
		</header>

		<div class="container">
			<h2 class="display-6 text-center text-wrap p-5">フル画面動画ヘッダーのサンプルページです</h2>

			<p class="text-center text-wrap p-3">ブラウザのリサイズやモバイルレスポンスへの切り替え時等、いつでも全画面一杯に動画の中央部を表示する仕様です</p>
		</div>

		<!-- Option 1: Bootstrap Bundle with Popper -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
	</body>
</html>

フル画面動画ヘッダーのサンプルページ(BootStrap版)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です