最近、フル画面動画ヘッダーへの改修案件に応募する機会がありまして、結果としては流れたのですが、せっかくの機会なので、オリジナルのフル画面動画ヘッダーを作成してみました。
動画は、静止画像のようなbackground系のCSSがないので、様々なブラウザのリサイズやモバイルレスポンシブの点において面倒です。
動画が画面サイズの変化に合わせて適切に表示されるように調整するにはJSを使うしかないと思われます。
仕様
| 特徴 | レスポンシブ対応。画面サイズが切り替わっても動画中央部分が常時画面中央に配置されるように設定しており、ブラウザ画面一杯に動画が表示される。 |
| 使用コンピューター言語 | HTML、CSS、JavaScript |
| フレームワーク | HTML5 |
| 対応ブラウザ | 現行の各種ブラウザ（エッジ、クローム、OPERA、ファイアーフォックス、サファリ） |
| ライセンス | ●動画ライセンスについて 「Pexels」(https://www.pexels.com/ja-jp)の無料動画を使用している。 ●ソースコードライセンスについて 100%GPLとします。 |
| 使用動画 | MPEG4、フレーム幅1920×フレーム高1080 |
| 推奨動画サイズ | 動画のフレーム構成にもよりますが、フレームサイズは幅2000×高1000前後が良いと思われます。 |
| 使い方 | コピペして適当に書き換えてお使いください。尚、ソースコード中の動画「フレーム幅」と「フレーム高」の数値、および「動画のパス」は必ず書き換えてお使いください。 |
フル画面動画ヘッダーのサンプルソースコード(HTML版)
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>フル画面動画ヘッダーのサンプルコード（HTML版 ※自由にコピペ、使用OK）</title>
<!-- 動画処理用JS -->
<script>
//動画サイズの定義
const mw = 1920; //動画フレーム幅。使用する動画サイズに応じて数値を書き換える。
const mh = 1080; //動画フレーム高。使用する動画サイズに応じて数値を書き換える。
//ページ読み込み時の動画表示の動的処理
window. addEventListener('DOMContentLoaded', () => {
const ww = innerWidth;
const wh = innerHeight;
const headerMp4 = document.querySelector('#headerMp4');
const mp4Wrap = document.querySelector('#mp4Wrap');
if((ww / wh)>=(mw / mh)){
headerMp4.style.width=ww+'px';
headerMp4.style.height='auto';
headerMp4.style.top='50%';
headerMp4.style.transform='translatey(-50%)';
headerMp4.style.webkitTransform='translatey(-50%)';
headerMp4.style.msTransform='translatey(-50%)';
headerMp4.style.left='0';
}
else{
headerMp4.style.width='auto';
headerMp4.style.height=wh+'px';
headerMp4.style.left='50%';
headerMp4.style.transform='translatex(-50%)';
headerMp4.style.webkitTransform='translatex(-50%)';
headerMp4.style.msTransform='translatex(-50%)';
headerMp4.style.top='0';
}
});
//ウィンドウリサイズ時の動画表示の動的処理
window.addEventListener('resize', () => {
const ww = innerWidth;
const wh = innerHeight;
const headerMp4 = document.querySelector('#headerMp4');
const mp4Wrap = document.querySelector('#mp4Wrap');
if((ww / wh)>=(mw / mh)){
headerMp4.style.width=ww+'px';
headerMp4.style.height='auto';
headerMp4.style.top='50%';
headerMp4.style.transform='translatey(-50%)';
headerMp4.style.webkitTransform='translatey(-50%)';
headerMp4.style.msTransform='translatey(-50%)';
headerMp4.style.left='0';
}
else{
headerMp4.style.width='auto';
headerMp4.style.height=wh+'px';
headerMp4.style.left='50%';
headerMp4.style.transform='translatex(-50%)';
headerMp4.style.webkitTransform='translatex(-50%)';
headerMp4.style.msTransform='translatex(-50%)';
headerMp4.style.top='0';
}
});
</script>
<!-- 独自CSS -->
<style>
body{
margin:0;
}
.movie-wrap{
height:100vh;
width:100%;
overflow:hidden;
z-index:0;
}
.branding-title{
position:absolute;
z-index:1;
top:50%;
-webkit-transform:translatey(-50%);
-ms-transform:translatey(-50%);
transform:translatey(-50%);
}
.title-font-style{
padding:200px;
color:white;
font-size:40px;
text-align:center;
}
@media screen and (max-width:768px){
.title-font-style{
padding:10px;
}
}
</style>
</head>
<body>
<header>
<div class="movie-wrap">
<video id="headerMp4" playsinline="" autoplay="" loop="" muted="" src="test3.mp4" style="position:relative;"></video>
</div>
<div class="branding-title">
<h1 class="title-font-style">貴社ウェブサイトを、ダイナミックで迫力のあるフル画面動画に</h1>
</div>
</header>
<div style="padding:50px;">
<h2><center>フル画面動画ヘッダーのサンプルページです</center></h2>
<p><center>ブラウザのリサイズやモバイルレスポンスへの切り替え時等、いつでも全画面一杯に動画の中央部を表示する仕様です</center></p>
</div>
</body>
</html>