【jQuery】「jquery.mb.YTPlayer」プラグインを使用してYouTube動画をWebサイトのメインビジュアルの背景に設定する方法

「YouTube動画をWebサイトの背景に流したい」という要望は多いですが、実装ハードルが高いと感じている方も少なくありません。

この記事では jquery.mb.YTPlayer プラグインを使い、YouTube動画をメインビジュアルの背景に設定する方法をゼロから解説します。オプションの詳細・スマホ対応・よくあるエラーまで網羅しているので、コピペでそのまま使えます。

この記事でわかること

jquery.mb.YTPlayer の概要と導入手順
基本実装コード（HTML・CSS・JavaScript）
主要オプション一覧と使い方
スマホ対応・パフォーマンス改善のポイント
よくあるエラーと解決策

jquery.mb.YTPlayerとは
導入手順
主要オプション一覧
完全なサンプルコード
スマホ対応のポイント
よくあるエラーと解決策
JavaScriptからコントロールする方法
パフォーマンス改善のポイント
よくある質問（FAQ）
あわせて読みたい
まとめ

jquery.mb.YTPlayerとは

jquery.mb.YTPlayer は、YouTube動画をWebページの背景（フルスクリーン動画背景）として表示できるjQueryプラグインです。Massimo Di Primio氏が開発し、GitHubで公開されています。

YouTubeのAPIを内部的に利用するため、自前でmp4を用意する必要がなく、動画管理・帯域コストを大幅に削減できるのが最大の特長です。

特徴	内容
動画ソース	YouTubeのURL または動画ID
自動再生	ページ読み込み時に自動再生（ミュート前提）
ループ	動画終了後に自動ループ再生
レスポンシブ	親要素に合わせてリサイズ
依存	jQuery 1.9以上 + jquery.mb.YTPlayer

導入手順

Step 1: スクリプトの読み込み

jQueryとjquery.mb.YTPlayerをCDNから読み込みます。</body>タグの直前に追加してください。

<!-- jQuery本体 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>

<!-- jquery.mb.YTPlayer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js"
  integrity="sha512-rVFx7vXgVV8cmgG7RsZNQ68CNBZ7GL3xTYl6GAVgl3iQiSwtuDjTeE1GESgPSCwkEn/ijFJyslZ1uzbN3smwYg=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>

注意： jQueryは必ずjquery.mb.YTPlayerより先に読み込んでください。順序が逆になるとエラーになります。

Step 2: HTML構造を作成する

動画を表示したいコンテナ（親要素）と、プラグインが制御する動画用の要素を用意します。data-property属性にYouTube URLや各種設定をJSON形式で記述します。

<!-- メインビジュアルのコンテナ -->
<section id="mainvisual">

  <!-- 動画背景（jquery.mb.YTPlayerが制御） -->
  <div id="bgndVideo" class="player" data-property="{
    videoURL: 'https://www.youtube.com/watch?v=YOUR_VIDEO_ID',
    containment: '#mainvisual',
    autoPlay: true,
    mute: true,
    startAt: 0,
    opacity: 1,
    loop: true
  }"></div>

  <!-- 前面に表示するコンテンツ -->
  <div class="mainvisual-content">
    <h1>キャッチコピーをここに</h1>
    <p>サブテキストをここに</p>
  </div>

</section>

YOUR_VIDEO_ID の部分を実際のYouTube動画IDに置き換えてください。動画URLが https://www.youtube.com/watch?v=abc123 であれば、IDは abc123 です。

Step 3: CSSを設定する

コンテナに position: relative と高さ指定が必要です。また、動画の前面にコンテンツを表示するために z-index を設定します。

/* メインビジュアルのコンテナ */
#mainvisual {
  position: relative;
  width: 100%;
  height: 100vh;       /* 画面の高さ全体 */
  overflow: hidden;
}

/* 動画が親要素いっぱいに表示されるよう調整 */
#bgndVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 前面コンテンツ */
.mainvisual-content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  padding-top: 30vh;
}

/* 動画の上に半透明オーバーレイを重ねてテキストを読みやすくする */
#mainvisual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

Step 4: JavaScriptで初期化する

ドキュメント読み込み完了後に YTPlayer() を呼び出してプラグインを初期化します。

$(document).ready(function() {
  $("#bgndVideo").YTPlayer();
});

主要オプション一覧

data-property または YTPlayer(options) の引数として渡せる主要なオプションをまとめました。

オプション	デフォルト	説明
`videoURL`	`""`	YouTube動画のURL or 動画ID（必須）
`containment`	`"body"`	動画を表示する親要素のセレクタ
`autoPlay`	`true`	ページ読み込み時に自動再生するか
`mute`	`true`	音声をミュートするか（自動再生にはtrue必須）
`loop`	`true`	動画終了後にループするか
`startAt`	`0`	再生開始位置（秒）
`stopAt`	`0`	再生終了位置（秒）。0の場合は動画の最後まで再生
`opacity`	`1`	動画の透明度（0〜1）
`vol`	`50`	音量（0〜100）。muteがtrueの場合は無効
`showControls`	`false`	YouTubeの再生コントロールを表示するか
`addRaster`	`false`	動画の上にドット状のラスター模様を重ねるか
`coverImage`	`""`	動画が読み込まれる前に表示するカバー画像のURL
`quality`	`"hd720"`	動画の画質（”small”/”medium”/”large”/”hd720″/”hd1080″/”highres”）
`ratio`	`"16/9"`	アスペクト比。縦長コンテナでは”9/16″など変更も可
`mobileFallbackImage`	`""`	モバイルで動画の代わりに表示する画像のURL

完全なサンプルコード

以上をまとめた、コピペして使えるサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>動画背景サンプル</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    #mainvisual {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    #bgndVideo {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
    }
    #mainvisual::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 0;
    }
    .mainvisual-content {
      position: relative;
      z-index: 1;
      color: #fff;
      text-align: center;
      padding-top: 30vh;
    }
    .mainvisual-content h1 { font-size: 2.5rem; margin-bottom: 1rem; }
    .mainvisual-content p  { font-size: 1.1rem; }
  </style>
</head>
<body>

  <section id="mainvisual">
    <div id="bgndVideo" class="player" data-property="{
      videoURL: 'https://www.youtube.com/watch?v=YOUR_VIDEO_ID',
      containment: '#mainvisual',
      autoPlay: true,
      mute: true,
      loop: true,
      startAt: 0,
      opacity: 1,
      mobileFallbackImage: '/images/fallback.jpg'
    }"></div>

    <div class="mainvisual-content">
      <h1>Welcome to My Site</h1>
      <p>動画が背景に流れます</p>
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js"
    integrity="sha512-rVFx7vXgVV8cmgG7RsZNQ68CNBZ7GL3xTYl6GAVgl3iQiSwtuDjTeE1GESgPSCwkEn/ijFJyslZ1uzbN3smwYg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    $(document).ready(function() {
      $("#bgndVideo").YTPlayer();
    });
  </script>

</body>
</html>

スマホ対応のポイント

iOSはブラウザのセキュリティポリシーにより、YouTubeの自動再生を禁止しています。そのためスマホでは動画が再生されません。

対策として、mobileFallbackImage オプションに代替画像のURLを指定することで、スマホではその画像が背景に表示されます。

$("#bgndVideo").YTPlayer({
  videoURL: "https://www.youtube.com/watch?v=YOUR_VIDEO_ID",
  containment: "#mainvisual",
  autoPlay: true,
  mute: true,
  loop: true,
  mobileFallbackImage: "/images/mainvisual-fallback.jpg"  // スマホ用の代替画像
});

ポイント： 代替画像はPCの動画と同じ雰囲気の画像を選ぶと、スマホユーザーへの印象が統一されます。動画の一場面をキャプチャして使うのがおすすめです。

よくあるエラーと解決策

症状	原因	解決策
動画が表示されない（画面が黒い）	jQueryの読み込み順序が逆、または動画IDが間違い	jQuery → YTPlugin の順に読み込む。YouTubeで動画IDを再確認する
動画が再生されない	autoPlayがfalse、または動画が非公開	autoPlay: true に設定。YouTubeで動画の公開設定を確認する
音が出ない	mute: trueの設定	mute: false に変更。ただしブラウザの自動再生ポリシーにより音声付き自動再生は多くの環境でブロックされる
コンテナからはみ出す	CSSのoverflow設定漏れ	コンテナに overflow: hidden を追加する
スマホで画面が真っ白/真っ黒	iOSの自動再生制限	mobileFallbackImage オプションで代替画像を指定する
“YTPlayer is not a function” エラー	jQueryより前にYTPlayerが読み込まれている	スクリプトの読み込み順を「jQuery → YTPlayer」の順に修正する
動画の縦横比がずれる	コンテナのアスペクト比と動画が合っていない	ratio オプションで動画に合わせたアスペクト比を指定する

JavaScriptからコントロールする方法

jquery.mb.YTPlayer はJavaScriptから動画を制御するメソッドを提供しています。ボタン操作や特定のイベントに合わせて動画を操作できます。

メソッド	説明
`YTPPlay()`	動画を再生する
`YTPPause()`	動画を一時停止する
`YTPStop()`	動画を停止する
`YTPMute()`	動画をミュートする
`YTPUnmute()`	ミュートを解除する
`YTPSetVolume(50)`	音量を設定する（0〜100）
`YTPChangeMovie(url)`	再生中の動画を別のURLに切り替える
`YTPGetCurrentTime()`	現在の再生位置（秒）を取得する

たとえばボタンクリックで動画を一時停止・再生する実装例：

// 一時停止ボタン
$("#btn-pause").on("click", function() {
  $("#bgndVideo").YTPPause();
});

// 再生ボタン
$("#btn-play").on("click", function() {
  $("#bgndVideo").YTPPlay();
});

// 別の動画に切り替え
$("#btn-change").on("click", function() {
  $("#bgndVideo").YTPChangeMovie("https://www.youtube.com/watch?v=NEW_VIDEO_ID");
});

パフォーマンス改善のポイント

動画背景はページの表示速度に影響します。以下の点を意識しましょう。

startAt で要点から再生： 動画の前半に不要な部分がある場合は startAt で中盤から再生開始すると、視覚的なインパクトが早い段階で得られます。
quality を適切に設定： 回線が遅い環境では "hd720" に抑えることで読み込みを速くできます。
coverImage でローディング中の見た目を改善： 動画が読み込まれるまでの間に表示される画像を指定し、空白表示を防ぎます。
Intersection Observer で遅延初期化： スクロールしてメインビジュアルが見えたときに初期化することで、初回ページ読み込みを軽くできます。

Intersection Observer を使った遅延初期化の実装例：

const observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      // ビューポートに入ったタイミングで初期化
      $("#bgndVideo").YTPlayer();
      observer.disconnect(); // 一度だけ実行
    }
  });
});

observer.observe(document.querySelector("#mainvisual"));

よくある質問（FAQ）

Q. jquery.mb.YTPlayerは無料で使えますか？

A. はい、MITライセンスで公開されており、商用・個人を問わず無料で利用できます。GitHubからダウンロードするか、CDNから読み込んでください。

Q. YouTubeの埋め込み制限のある動画は使えますか？

A. 使えません。YouTubeの設定で「埋め込みを許可」になっている動画のみ使用できます。自分でアップロードした動画であれば設定から変更可能です。

Q. WordPressに導入するにはどうすれば良いですか？

A. wp_enqueue_scriptsフックを使い、functions.phpでjQueryとjquery.mb.YTPlayerを読み込んだうえで、テーマのPHPファイルやカスタムJSファイルで初期化コードを記述するのが一般的です。

Q. 複数の動画を切り替えて再生できますか？

A. はい、YTPChangeMovie() メソッドを使うと再生中の動画を別のYouTube動画に切り替えられます。スライドショーのような演出にも応用できます。

Q. 動画にテキストや画像を重ねるにはどうしますか？

A. 動画コンテナ内に別の要素を配置し、CSSで position: relative; z-index: 1; を設定することで動画の前面に表示できます。動画は z-index: 0 になっているため重ね順が正しく制御されます。

まとめ

jquery.mb.YTPlayer の導入ポイント

jQuery → jquery.mb.YTPlayer の順でスクリプトを読み込む
data-property に videoURL・containment・autoPlay・mute などをJSON形式で記述する
コンテナには position: relative; overflow: hidden; が必須
スマホ対策として mobileFallbackImage で代替画像を指定する
パフォーマンスは coverImage / startAt / quality で調整できる

jquery.mb.YTPlayerを使えば、比較的少ないコードで印象的な動画背景を実現できます。スマホ対応や表示速度も意識しながら、ユーザー体験を高めるメインビジュアルを作ってみてください。