読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

要素の背景にYoutubeの動画を流すプラグインを作りました

regular youtube jquery jquery plugin

今更感が凄いのですが、案件で必要そうだったので勉強がてら作りました。
このプラグインを使用すると特定の要素の背景またはページ全体の背景に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にあげています。
バグ等何かありましたらお知らせください...!

jquery.tuber.js

作ってからvideo要素使えばよかったのでは...!とか思っちゃいましたが気にしない方向で。。。