
YouTubeをWebサイトの背景で再生
最近はWebサイトのトップページの背景にYouTubeの動画を再生させていることが多い。
動画ファイルはファイルサイズが大きいため、サーバー負荷軽減のためYouTubeに動画をアップロードしてWebサイトで読み込むケースが多く見られる。
(最近はvideoタグでの表示も多いが。 例: アークナイツ)
iwb.jpでも以前「背景にYouTube動画を再生する方法」の記事を投稿したことがあるが、コードが多めなので初心者には少し難しい。
しかし、jQueryプラグインにはjquery.mb.YTPlayerというYouTube動画を背景に設定するものがあるので、これを使用すれば簡単に実装できる。
やり方はjQuery、プラグイン、プラグインのCSSを読み込んで表示箇所にdata-propertyの属性などを追加するだけだ。
とりあえずYouTube動画を背景に表示させるだけなら以下のコードをコピペすればできる。
<html> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/css/jquery.mb.YTPlayer.min.css"> <h1>jquery.mb.YTPlayer Sample</h1> <div id="ytPlayer" data-property="{ videoURL: 'https://www.youtube.com/watch?v=r1xohS2u69E', autoPlay: true, loop: 1, mute: true, showControls: false, showYTLogo: false, }"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js"></script> <script> $(function() { $("#ytPlayer").YTPlayer(); }); </script> </html>
ブラウザがアクティブでないと動画が一時停止するが、これは処理軽減のための仕様。タブがアクティブでないときも一時停止となる。