ページ全体の背景に動画を流す方法をやってみたので、忘れないようにメモ代わりに。
今回はjQueryのプラグインなどではなくHTMLとCSSだけでの実装をしてみます。
動画は
今回は「Pexels Videos」さんから拝借しました。
無料で種類も豊富なのでおすすめです。
動画の記述
videoタグを使用します。
<video src="natural.mp4" poster="poster.png" autoplay loop></video>
poster属性
ユーザーが利用できる環境でない場合に表示させる画像指定できます。
ここで指定するものは画像の最初のフレームにするなど動画のヒントになるものがいいようです。
controls属性
指定することでインターフェース(再生/停止/ボリュームなど)が自動的に表示されます。
autoplay属性
ページの読み込み後に自動的に動画が再生されます。
preload属性
あらかじめ動画を読み込んでおけます。読み込んでおくことで再生ボタンクリック時に再生がスムーズになるという利点があります。
一般的なブラウザではautoplay = autoになっているため元々自動再生されるようになっています。
preload属性に指定できるもの | |
auto | ページ読みこみ時に動画ファイルを読み込む |
---|---|
none | ページ読みこみ時に動画ファイルを読み込まない |
matadata | ページ読みこみ時に動画ファイルのメタデータを読み込む |
コンテンツ
動画の上に重なる部分のコンテンツを用意します。
今回はダミーコンテンツをおきます。
<div class="text"> <h2>タイトル</h2> <p>テキストが入ります。</p> </div>
CSS
動画をフルスクリーンで表示ができるよう設定します。opacityも効くようです。
video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; }
動画の上にコンテンツがくるように設定をします。
上から2行は必ず必要です。残りはビジュアルの設定になります。
.text { position: relative; /*必ず必要*/ z-index: 2; /*必ず必要*/ text-align:center; width:50%; padding:20px; margin: 0 auto; margin-top: 200px; background-color:#fff; color: #888; }
この記事を読んだ方におすすめ