jquery.vide.jsを使って簡単に動画(mp4、ogv、webmファイル)をウェブページの背景にする方法をご紹介します。
Contents
動画をウェブページの背景にするCSS記述
※htmlとbodyタグのwidth、heightを100%にします。必要に応じて変更して下さい。
<style> html, body { margin: 0; width: 100%; height: 100%; font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 22px; line-height: 1.6em; padding: 20px 0; position: absolute; width: 100%; } </style>
動画をウェブページの背景にするHTML記述
※bodyタグにdata-vide-bg=”tree”を記述します。同じ階層に動画(tree.mp4)を用意します。その他動画ファイルogv、webmも用意すれば利用可能です。
<body data-vide-bg="tree"> <h1>jquery.vide.jsを使って動画をウェブページの背景にしてます。</h1> </body>
jquery.vide.jsを使って簡単に動画をウェブページの背景にするJavaScriptの記述
※jquery.min.js(1.11.3系)、jquery.vide.jsファイルを読み込むだけです。
<script src="jquery.min.js"></script> <script src="jquery.vide.js"></script>
jquery.vide.jsを使って動画(mp4)をウェブページの背景にするデモページ
jquery.vide.jsを使って動画(mp4)をウェブページの背景にするデモページ
ソース元:Vide – easy as hell jQuery plugin for video backgrounds
Vide – easy as hell jQuery plugin for video backgrounds
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告