jQueryなどを使わずに、背景動画を設置して、再生される動画の上にテキストなどのコンテンツを表示する方法をご紹介いたします。
デモページを用意したので、以下のリンクよりご参照いただければと思います。
動画は、Coverrというフリーの動画素材を配布しているサイトからダウンロードしました。
CSSのみで全画面に動画を設置して、その上に文字などを重ねて表示する方法
HTMLは以下の通りです。動画とコンテンツをマークアップします。
<video autoplay loop poster="movie.jpg"> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> </video> <div class="cont"> <div class="cont-inner">ここにコンテンツを入力します。</div> </div>
動画のファイル名やパスは適宜変更してください。
CSSは以下のように記述します。
video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(movie.jpg) no-repeat;
background-size: cover;
}
.cont{
display:flex;
justify-content:center;
margin: 30% 0 0;
}
.cont-inner{
width: 210px;
padding: 20px;
border: solid 1px #fff;
color: #fff;
}
videoタグについては、z-indexでコンテンツの後ろで再生されるよう指定し、min-widthとmin-heightで背景いっぱいに表示されるようにしています。
コンテンツについては、位置や色などを調整しているだけなので、この部分はサイトに合わせて変更してください。
あとがき
最近は、背景で動画が再生されるページをよく見かけるようになりましたね。
上述したように、割と簡単に実装できますので、サイトの背景で動画を再生させたい場合はぜひ参考にしてください。