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>
ブラウザがアクティブでないと動画が一時停止するが、これは処理軽減のための仕様。タブがアクティブでないときも一時停止となる。
