2022.01.17
YouTubeのポップアップ自動再生する方法2つを比較！
こんにちは、Maromaroの松橋です。
サイト上にYouTubeのポップアップ自動再生を実装する機会があり、
「Lity.js」と「jquery.mb.YTPlayer」というライブラリを使った方法2つを実際に実装して、比較した内容をまとめていきたいと思います！
※実装にあたって、サムネイルは、直接YouTubeのiframeを埋め込みました。
「Lity.js」を使う方法
「Lity.js」は、軽量なライトボックスプラグインで、YouTubeだけでなく、画像などもポップアップすることができます。
縮小化・gzip圧縮で約3キロバイトになる軽量プラグインとのことです。
自動再生機能は、data-lity属性を付与したaタグのhref属性の値に、autoplay=1のパラメーターを付与すると動かすことができます。
デモ・コード
ということで実装してみました。
See the Pen 【YouTubeポップアップ自動再生】Lity.js by マロマロ松橋 (@maromaro_matsuhashi) on CodePen.
(※CODE PENはiframe中に表示されるため、自動再生は動きませんでした。通常の静的ファイルにページに実装すると動きます。)
実装はとても簡単でした。
自動再生機能は、iframeタグにautoplayパラメーターを付与すると動きます。
ただモバイル端末は自動再生非対応でした。
この仕様はIFrame Player API のドキュメントにその理由が記載されていました。
「警告: ユーザーが費用負担する携帯電話ネットワーク経由で要求していないダウンロードを防止するために、iOS の Safari では組み込みメディアを自動再生できません。必ずユーザーが自分で再生します。」
この制限があるため、autoplay、playVideo()、loadVideoById() などの関数およびパラメータはすべてのモバイル環境では動作しません。
ということで、モバイル端末は、いわゆるギガを多く消費してしまうためとのことで自動再生されないようです。
メリット
- 実装がとてもシンプル。
- メディアプレイヤーはYouTube標準のものが使える。
デメリット
- スマートフォンでは自動再生されない。
「jquery.mb.YTPlayer」を使う方法
「jquery.mb.YTPlayer」は、Youtubeのカスタムプレーヤーの生成したり、YouTube動画をページの背景として使用できるようにするための、 jQueryプラグインです。
また、ポップアップ自体の機能はこのプラグインにはなく、自前で実装する必要があります。
デモ・コード
See the Pen 【YouTubeポップアップ自動再生】 jquery.mb.YTPlayer by マロマロ松橋 (@maromaro_matsuhashi) on CodePen.
自動再生は「jquery.mb.YTPlayer」のdata-property属性に付与する配列オプションのautoPlayをtrueにすることで動きます。
なんとスマートフォンでも動きました。。。。！
メリット
- PCでもスマートフォンでも自動再生が可能
- 様々なオプションがあり、動画のスタート・エンドポイントを設定できたり、ループ再生に対応
デメリット
- ポップアップ機能を自前で実装するので、Lity.jsより小難しい部分がある。
- メディアプレイヤーはプラグインのもの(YouTube標準ではない)
- 動画上部・下部が少し隠れる(YouTube標準のメディアプレイヤーを隠すため？)
まとめ
まとめた結果、両者ともメリット・デメリットがあるので、マルチデバイスで自動再生させたい場合は、「jquery.mb.YTPlayer」、特にこだわりがない場合は、「Lity.js」でYouTubeポップアップ自動再生を実装するのが良いと思いました！理想的には、YouTubeのメディアプレイヤーで自動再生できると良いなと思いますが、なかなか難しいようです。
また新しいプラグインなどあれば積極的に試していきたいです！
以上、Maromaroの松橋でした。
