HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/6-3-1.css">video ファイルと代替え画像を用意します。video ファイルは各ブラウザに対応するため .mp4、.ogv、.webmの3 種類を用意します。
※動画は、ユーザーのページの読み込み時間や再生時の挙動を削減するため4MB 以下を目安に制作しましょう。
※無料の高画質video 素材は Pixabay （https://pixabay.com/）などのサービスを活用しましょう。
body内の背景動画を表示させたい場所にHTMLを記載します。
<header id="header">
<h1>Title</h1>
<div id="video-area">
<video id="video" poster="img/movie.jpg" webkit-playsinline playsinline muted autoplay loop>
<!--
poster：動画ファイルが利用できない環境で代替表示される画像
webkit-playsinline：iOS 9までのSafari用インライン再生指定
playsinline：iOS 10以降のSafari用インライン再生指定
muted：音声をミュートさせる
autoplay：動画を自動再生させる
loop：動画をループさせる
controls：コントロールバーを表示する
-->
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogv" type="video/ogv">
<source src="video/movie.webm" type="video/webm">
<p>動画を再生できる環境ではありません。</p>
</video>
<!--/video-area--></div>
</header>
CSSの書き方
/*========= 背景動画設定のCSS ===============*/
/*header設定*/
#header{
position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
height: 100vh;/*高さを全画面にあわせる*/
}
#video-area{
position: fixed;
z-index: -1;/*最背面に設定*/
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}
#video {
/*天地中央配置*/
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*縦横幅指定*/
width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
min-height: 100%;
min-width: 100%;
}
/*見出し設定*/
h1{
/*要素の配置*/
position:absolute;
/*要素を天地中央寄せ*/
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
/*見た目の調整*/
color:#fff;
text-shadow: 0 0 15px #666;
}