1分でできるYouTube動画をWebサイトの背景での再生方法

YouTubeをWebサイトの背景で再生

最近はWebサイトのトップページの背景にYouTubeの動画を再生させていることが多い。

例: プリコネR　アイマスSS

動画ファイルはファイルサイズが大きいため、サーバー負荷軽減のためYouTubeに動画をアップロードしてWebサイトで読み込むケースが多く見られる。
(最近はvideoタグでの表示も多いが。例: アークナイツ)

iwb.jpでも以前「背景にYouTube動画を再生する方法」の記事を投稿したことがあるが、コードが多めなので初心者には少し難しい。

しかし、jQueryプラグインにはjquery.mb.YTPlayerというYouTube動画を背景に設定するものがあるので、これを使用すれば簡単に実装できる。

jquery.mb.YTPlayer

やり方は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>

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

jquery.mb.YTPlayer Sample

YouTubeをWebサイトの背景で再生

関連する記事