先に作成しましたフルスクリーン動画ヘッダー（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>