投稿者: 動画を使った背景のWEBサイトの作り方
背景が動くサイトの作り方をお教えします。
背景が動くサイトはHTMLとCSSで作ることも可能ですが、難しい知識や技術が必要とされます。
このページではそのような難しい技術を使わずなおかつ豪華なWEBサイトを作る方法を紹介しています。
必要なものはYouTubeにアップロードされた動画とYTPlayer(ライセンスの都合上ご自身で検索してください）というプラグインを用意してください。
YouTubeにアップロードされている動画なら公序良俗に反しているもの以外はすべてオッケーです。
ただし、YouTubeは著作権に厳しいので規約違反が認められる動画は転載しないように気を付けましょう。本人のアカウント以外の動画を転載することは禁止です。
また、WEBサイトを持つことは、WEBマスターである制作者本人・管理者本人に著作権が帰属します。この点が理解できる方ならどなたでも背景が動くサイトを作ることが可能です。
また、HTML CSS JavaScriptを編集することが前提になりますので、自分のホームページを持っているが、HTMLが編集できないやcssを自由に編集することができないJavaScriptを編集する権限がないというサイトでは運用できませんことを明言します。
用意するもの
・YouTubeにある動画のURL
・YTPlayer APIまたはYTPlayerそのもの
GitHubというところにYTPlayerがある場合が多いです。
・もしくは外部ライブラリから参照する方法があります。
jquery外部API
では、実際に運用方法を明記します。
1. HTMLをマークアップする
2. head内に記述する
3. ソース
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport=” content=”width=1280px,
initial-scale=1,
user-scalable=no”>
<title>サンプルページ</title>
<link rel=”shortcut icon” href=”https://～～～
<link rel=”stylesheet”
href=”/jquery.mb.YTPlayer/dist/css/
jquery.mb.YTPlayer.min.css”>
←自前サーバーにおいてある場合
<script src=”/jquery.mb.YTPlayer/dist/jquery.mb.YTPlayer.js”>
</script>
<script type=”text/javascript”>
$(function () {
$(“#backgroundVideo”).YTPlayer();
});
</script>
</head>
<body>
<div id=”backgroundVideo” data-property=”{
videoURL: ‘https://www.youtube.com/watch?aaaaaaaaaaaa’,
mute: true, ←この属性をtrueにしなければ動画が連続再生されない。
showControls: false,←この属性をfalseにすれば関連動画が表示されなくなる。
}”>
</div>←body内のdivタグにこの指定を入れないと背景が動画にならない
~~~
~~~
~~~
</body>
</html>
CSS記述方法
/* —– 背景用の動画ファイル —– */
#backgroundVideo {
position: relative;
right: 0;
bottom: 0;
overflow: hidden;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -10;
}
APIを読み込むと、読み込む時間がかかる場合はそれだけ動画の表示が遅くなります。
以上の記述で背景が動画のWEBサイトを作成することができます。
環境の違いやAPIが用意できないなどの場合は別の方法を探す必要があります。
Kurotsu Shirou ProjectのトップのWEBサイトも上記と同様のコーディングで表現しています。