covervid.jsを使ってvideoタグの動画(mp4、webm)を背景に表示する方法をご紹介します。
Contents
ディスプレイ広告
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>
covervid.jsを使ってvideoタグの動画(mp4、webm)を背景に表示するデモページ
covervid.jsを使ってvideoタグの動画(mp4、webm)を背景に表示するデモページ
ソース元:covervid
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。