要素の背景にYoutubeの動画を流すプラグインを作りました
今更感が凄いのですが、案件で必要そうだったので勉強がてら作りました。
このプラグインを使用すると特定の要素の背景またはページ全体の背景にYoutubeの動画を流すことが可能になります。
デモページを作ったのでご覧ください。
デモページ
使い方
head要素内でjquery.jsと今回紹介するプラグインであるjquery.tuber.jsを読み込みます。
<head> <script src="jquery.js"></script> <script src="jquery.tuber.js"></script> </head>
body要素内で背景に動画を載せたい要素の直下に空のdiv要素を配置します。
ページ全体に動画を配置する場合はbody要素の直下に空のdiv要素を配置します。
配置が終わったら、jquery.tuber.jsを呼び出します。
jquery.tuber.jsを呼び出す際、youtubeの動画IDを必ず指定してください。
これで要素の背景に動画が流れるようになります。
<head>
<script>
$(function() {
$('#ytplayer').tuber({
isBackground: true, // ページの背景に載せる場合に指定する
videoId: 'VIDEO-ID'
});
});
</script>
</head>
<body>
<div id="ytplayer"></div>
</body>
オプションについて
現在、以下のオプションを用意しています。
- isBackground[boolean]: ページの背景にするかどうかを指定します。
- videoID[string]: 動画のidを指定します。
- videoLoop[boolean]: 動画をループして流すかを指定します。
- videoMute[boolean]: 動画の音声をミュートにするかを指定します。
- videoStart[number]: 動画のスタート位置を指定します。指定した秒数から動画が流れます。
- videoTheme[string]: 埋め込みプレーヤーのテーマを指定します。'dark'または'light'が指定出来ます。
対応ブラウザについて
ダウンロードについて
毎度のごとくGithubにあげています。
バグ等何かありましたらお知らせください...！
作ってからvideo要素使えばよかったのでは...！とか思っちゃいましたが気にしない方向で。。。
