[YouTube、jQuery]WEBサイトの背景にYouTubeの動画を配置するjQueryプラグイン[jquery.mb.YTPlayer]

WEBサイトの背景にYouTubeの動画を配置するjQueryプラグイン[jquery.mb.YTPlayer]

WEBサイトの背景に動画を配置と聞くとvideoタグ使ってどうたらこうたら、未対応のブラウザのために画像をどうたらこうたらとか、フォーマットが云々とけっこう面倒なものでしたがYouTubeにアップロードした動画を背景にできるjQueryプラグインがありますので、ご紹介しようと思います。

デモはこちら

jquery.mb.YTPlayerのダウンロード

GitHubにアクセスしてダウンロードします。

※ダウンロードは緑色のボタン[Clone or download]→[Download ZIP]でダウンロードできます。

解凍したら「jquery.mb.YTPlayer-3.0.19\dist」内の「jquery.mb.YTPlayer.min.js」を設置するサイトのディレクトリにコピーしておきます。

WEBサイトの背景にYouTubeの動画を配置するjQueryプラグイン[jquery.mb.YTPlayer]

html

上記をbody内に書きます。
body内ならどこでもいいと思いますが、body直後がいいでしょう。(理由はない)

js

以上でWEBサイト全画面でYouTubeの動画の再生が可能です。

YouTube動画を表示する場所を自由に決める

全画面はいいとしてYouTube動画を表示する場所を「このdivの中」など自由に配置するには・・・

以上で好きな場所にYouTube動画を埋め込めます。

オプション

data-propertyに設定するオプションはGitHubを参照下さい。

まとめ

手軽に簡単に動画を背景にしたい場合は使えますね。
ちなみにスマホには対応していません。
スマホはメディアクエリで画像と入れ替えたりする工夫が必要です。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク