ウェブ開発の世界では、背景として動画を使用することで、サイトの魅力を一層引き立てることができます。
今回は、covervid.jsを活用してHTMLのvideoタグで動画を背景に設定する方法について、初心者でも理解しやすいようにご紹介します。この技術を使えば、あなたのウェブサイトも動的で視覚的に魅力的なものに変身させることが可能です。
covervid.jsを使ってvideoタグの動画（mp4、webm）を背景に表示する方法をご紹介します。
動画を背景に設定する基本的なCSSの書き方
まずは、動画をウェブサイトの背景に設定するためのCSSの基本的な書き方から見ていきましょう。ここでは、動画を包含するコンテナに対するCSSの設定方法を説明します。
vieoタグを囲むエリア（.treewrap）のCSS記述です。
<style>
html, body {
margin: 0;
font-size: 16px;
text-align: center;
}
.treewrap{
position: relative;
min-width: 720px;
}
h1{
text-align: center;
font-size: 40px;
padding: 50px 0 0 0;
position: absolute;
width: 100%;
color: #ffffff;
}
.content{
font-size: 40px;
padding: 50px;
font-weight: bold;
}
</style>
HTMLでの動画設定
次に、HTMLで動画をどのように設定するかを見ていきます。
背景にするvideoタグ（class=”treevideo”）の動画（tree.mp4）を用意しました。webmファイルは用意してないのでコメントアウトしてます。以下のコードは、動画ファイルをvideoタグで読み込み、自動再生やループ再生を設定しています。
<section class="treewrap">
<video class="treevideo" autoplay loop muted poster="tree.jpg">
<source src="tree.mp4" type="video/mp4">
<!-- <source src="tree.webm" type="video/webm">-->
</video>
<h1>covervid.jsを使ってvideoタグの動画（mp4、webm）を背景に表示</span></h1>
</section>
<section class="content">コンテンツエリア</section>
JavaScriptでの動的なサイズ調整
ウェブサイトのビューポートに応じて動画のサイズを動的に調整するJavaScriptの設定方法です。jQueryとcovervid.jsを使用して、フルスクリーンでの表示を実現します。
jquery.min.js（v1.10系）、covervid.jsファイルを読み込みます。背景表示する動画をブラウザのフルスクリーンにする処理をfullscreen()関数に記述してます。coverVid(document.querySelector(‘videoタグのclass名’), 動画幅サイズ, 動画縦サイズ)で設定します。
<script src="jquery.min.js"></script>
<script src="covervid.js"></script>
<script type="text/javascript">
fullscreen();
$(window).resize(fullscreen);
function fullscreen() {
var treewrap = $('.treewrap');
var windowH = $(window).height();
var windowW = $(window).width();
treewrap.width(windowW);
treewrap.height(windowH);
}
coverVid(document.querySelector('.treevideo'), 640, 360);
</script>
covervid.jsを使ってvideoタグの動画（mp4、webm）を背景に表示するデモページ
実際にこの技術を使ってどのようなビジュアルが実現できるか、以下のデモページで確認できます。
covervid.jsを使ってvideoタグの動画（mp4、webm）を背景に表示するデモページ
ソース元：covervid
covervid.jsの詳細は以下のGitHubのリポジトリで確認できます。
まとめ
背景に動画を設定することは、ユーザーの注目を引きつけるための効果的な手段です。この記事を通じて、基本的な技術をマスターし、あなたのウェブサイトに新しい命を吹き込んでみてください。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
