簡単にYouTubeを背景で再生するプラグイン「jquery.mb.YTPlayer」を試してみた
2020.04.05
みなさま、こんにちは。
最近、5Gのサービスが始まり、webサイトもよりいっそう動的な見せ方が増えるかもしれません。
今回はその一端、動画を使用したwebサイトを、簡単に作成できるjquery.mb.YTPlayerというプラグインを試してみました。
YouTubeを背景で使用したい時に便利なプラグインjquery.mb.YTPlayer
HTML５から動画を埋め込める <video> が追加され、HTMLからシンプルに動画を扱えるようになりました。
しかし背景で再生となると、 CSS の position を使用しコンテンツを重ねたりする作業が発生するので、すこし敷居が上がった感じが……。
そんな時はjquery.mb.YTPlayerというプラグインを検討してみてください。
導入の仕方
プラグインのファイルはこちらからダウンロードしてください。
まずはサンプルHTMLを見てみてください。
【DEMO】YouTubeを背景で再生するプラグイン「jquery.mb.YTPlayer」
再生されるまでに時間がかかりますが、背景に動画が流れていることが確認できましたでしょうか。
※タブレット以下は画像が表示されるようにしました。
ソースコードの書き方
まずはソースをご覧ください。
|
1 2 3 4 5 6 7 |
<script src="/path/jquery-3.4.1.min.js"></script> <script src="/path/jquery.mb.YTPlayer.min.js"></script> <script> $(function () { $('.js-youtube').YTPlayer(); }); </script> |
head でjQueryとjquery.mb.YTPlayerを読み込み、 $('.js-youtube').YTPlayer(); と実行するコードを記入してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="visual"> <div class="js-youtube visual-video" data-property=" { videoURL:'https://youtu.be/eXcRHg9JycQ', containment:'.visual-video', autoPlay:true, mute:true, startAt:0, realfullscreen:true, opacity:1 } "> </div> </div> |
実行時に決めたトリガー .js-youtube にオプションを記載していきます。
細かいオプションは更新などもあるので本家を参考にしみてください。
これで基本的に動きますので、あとは CSS で微調整してみてください。
なおオプションでスマホ時に画像変換などもできるようですが、今回は CSS で無理やり設定しました。
使用してみた感想は？
HTMLだけでシンプルに実装できるので、導入コストはかかりません。
英語のドキュメントを読み込みオプションを設定するよりは、 CSS で指定したほうが簡単かもしれません。
とりあえずYouTubeをかっこよく取り入れたいと思うのであれば、導入することに間違いはないでしょう。
もしサイトに動画を導入することを考えていれば利用してみてください。
※ただ、導入だけであれば簡単ですが、スマホ対応、動画の上にオーバーレイ要素を載せたりと結局煩雑な作業が発生することも否めないかなと思いました。
