はじめに
「自社サイトやブログの片隅で、特定のYouTubeチャンネルの最新動画をアピールしたい」
「でも、毎回同じ動画じゃ飽きるし、ユーザーが邪魔だと思ったら閉じたり最小化したりできるようにしたい」
今回は、Googleタグマネージャー（GTM）を使って、YouTubeとは全く無関係な任意のWebサイトに、チャンネルの最新動画20本からランダムで自動再生（ミュート）される固定ポップアッププレイヤーを実装する方法を解説します。
サイトのHTML/CSSを直接いじることなく、GTMだけで完結する手軽な方法です。
出来ること
- 画面の右上にプレイヤーが固定配置（固定ポップアップ）される
- 指定したチャンネルの最新20本からランダムに1本が選ばれ、自動再生（ミュート状態）される
- 「閉じる（×）」ボタンでプレイヤーを完全に削除できる
- 「最小化（−）」ボタンで、動画を非表示にしてコンパクトにできる（元に戻すことも可能）
ステップ1：YouTubeのプレイリストIDを確認する
今回はチャンネルの「アップロード動画一覧」のプレイリストを利用します。
- 対象のYouTubeチャンネルのトップページを開きます。
- チャンネルID（例:
UC...で始まる文字列）を確認します。 - チャンネルIDの
UCの部分をUUに書き換えます。これが「アップロード動画一覧」のプレイリストIDになります。- 例：チャンネルIDが
UCvpredjG93ifbCP1Y77JyFAの場合、プレイリストIDはUUvpredjG93ifbCP1Y77JyFAになります。
- 例：チャンネルIDが
ステップ2：GTM（Googleタグマネージャー）の設定
1. トリガーの作成
ポップアップをどのタイミングで表示させるかを設定します。
-
トリガーのタイプ:
ページビュー（またはウィンドウ読み込み） -
トリガーの発生場所:
すべてのページビュー（特定のページだけにしたい場合は一部のページビューでURLを指定）
2. タグの作成
本番のスクリプトを流し込みます。
-
タグの種類:
カスタムHTML -
HTML: 以下のコードをそのまま貼り付けます。
- ※ 6行目の
var playlistId = "..."の部分を、ステップ1で調べたご自身のプレイリストIDに書き換えてください。
- ※ 6行目の
<script>
(function() {
// すでにポップアップがあれば処理を終了する
if (document.getElementById('youtubePopup')) return;
// 1. 指定チャンネルの「アップロード動画一覧」のプレイリストIDを設定
var playlistId = "UUvpredjG93ifbCP1Y77JyFA";
// 最新20本の中からランダムなインデックス（0〜19）を抽出
var randomStartIndex = Math.floor(Math.random() * 20);
// 2. HTML要素を動的に作成
var container = document.createElement('div');
container.id = 'youtubePopup';
var wrapper = document.createElement('div');
var iframe = document.createElement('iframe');
// ×ボタン要素の作成
var closeBtn = document.createElement('div');
closeBtn.textContent = '×';
closeBtn.id = 'youtubePopupClose';
// 最小化ボタン要素の作成
var minBtn = document.createElement('div');
minBtn.textContent = '−';
minBtn.id = 'youtubePopupMin';
// 指定チャンネルのプレイリストURLに、ランダムなインデックスと自動再生・ミュート設定を結合
iframe.src = '[https://www.youtube.com/embed/?listType=playlist&list=](https://www.youtube.com/embed/?listType=playlist&list=)' + playlistId + '&index=' + randomStartIndex + '&autoplay=1&
'''