videoタグの動画（mp4、webm）を背景に表示する方法【covervid.js】｜DAD UNION

covervid.jsを使ってvideoタグの動画（mp4、webm）を背景に表示する方法をご紹介します。

Contents

videoタグの動画（mp4、webm）を背景に表示するCSS記述
videoタグの動画（mp4、webm）を背景に表示するHTML記述
covervid.jsを使ってvideoタグの動画（mp4、webm）を背景に表示するJavaScriptの記述
covervid.jsを使ってvideoタグの動画（mp4、webm）を背景に表示するデモページ
ソース元：covervid

videoタグの動画（mp4、webm）を背景に表示する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>

videoタグの動画（mp4、webm）を背景に表示するHTML記述

※背景にするvideoタグ（class=”treevideo”）の動画（tree.mp4）を用意しました。webmファイルは用意してないのでコメントアウトしてます。その他、必要に応じて変更して下さい。

  <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>

covervid.jsを使ってvideoタグの動画（mp4、webm）を背景に表示するJavaScriptの記述

※jquery.min.js（v1.10系）、covervid.jsファイルを読み込みます。背景表示する動画をブラウザのフルスクリーンにする処理をfullscreen()内に記述してます。coverVid(document.querySelector(‘videoタグのclass名’), 幅サイズ, 360)

<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'), 動画幅サイズ, 動画縦サイズ);
</script>