YouTube埋め込みツール、再生リストもチャンネルも、自分のホームページの一部に

YouTubeのチャンネル、再生リスト、または自分で選んだ動画のリストから動画を取り込み、訪問者が再生できるカードとして自分のページに並べる埋め込みウィジェットです。YouTube公式の埋め込みコードとは別物です。公式のコードは動画1本か再生リスト1つをYouTubeのプレーヤーで表示するもので、再生リストに足した動画は反映されますが、チャンネルに新しく上げた動画が自動で並ぶことはなく、見た目もYouTubeのプレーヤーのままです。このウィジェットはチャンネルそのものを参照できるので、動画を公開すれば、プランで決まる間隔で表示にも加わります。公式の埋め込み方法は先に一通り試し、その結果を公開しています。

方法は2つあります。ひとつはYouTube公式の方法で、再生リストを開いて「共有」から「埋め込む」を選び、表示されたiframeのコードをページに貼り付けます。無料で、再生リストをYouTubeのプレーヤーのまま見せるだけならこれで十分です。もうひとつがこのウィジェットで、再生リストのリンクを貼り付けると、その再生リストの動画が自分で選んだレイアウトとテーマのカードとして並び、再生リストに動画を足せば、プランで決まる間隔でサイト側にも加わります。公式の手順とそのコードの限界は、日本語ガイドでコードつきで解説しています。

できます。youtube.com/playlist?list= で始まる再生リストのリンクを貼り付けると、入力欄がそれを再生リストとして読み取り、保存する前に見つかった再生リストを表示します。チャンネルのリンク、@ハンドル、動画のリンク（その動画を持つチャンネルに解決されます）も同じ入力欄で受け付けます。選んだ動画のリストを作る場合は別の入力欄で、watch?v=、youtu.be、Shorts、/embed/ の動画リンクや11文字の動画IDを、1行に1本ずつ貼り付けます。

どちらもできますし、3つめの方法もあります。チャンネルのソースは、そのチャンネルの最近のアップロードを新しい順に表示し、新しい動画を加え続けます。再生リストのソースは、再生リストをひとつ表示します。選んだ動画のソースは、リンクを貼り付けた動画だけを公開日の新しい順に表示し、勝手に何かを加えることはありません。この3つで全部です。この製品にはYouTubeのハッシュタグ検索やキーワード検索はなく、登録してから気づくより、ここで知っておいていただくほうがよいと考えています。

チャンネルの所有者である必要はなく、Googleへのログインも要りません。YouTubeのソースは公開されているデータを当社のAPIキーで読み込むので、Googleへのログインも、OAuthの許可画面も、所有者の確認も、手順のどこにもありません。公開されているチャンネルや再生リストのリンクを貼れば取り込まれます。そのため制作会社が、誰にもパスワードを尋ねずに、クライアントの代わりにフィードを設定することもできます。

標準の設定では、動画のカードは静止画と、当社のスタイルシートで描いた再生ボタンです。訪問者がカードを押すまでページにYouTubeのプレーヤーはなく、押すとモーダルが開いてその中でプレーヤーが読み込まれます。YouTubeをいつ呼び出すかは訪問者が決める、というのが標準の設計です。例外は、Proプラン以上と無料トライアル中に使えるライブプレビュー設定を自分でオンにした場合で、そのときはページの読み込みが終わったあと、画面に入ったカードがプライバシー強化モードのプレーヤーでミュート再生されます。速度スコアのランキングはあえて公開していません。ウィジェットのスコアはページ上の位置とフィードの中身で大きく変わるからです。YouTubeの埋め込みが重くなる仕組みと、対策ごとのトレードオフは日本語ガイドで説明しています。

推測ではなく実測しました。標準のyoutube.comの埋め込みは、誰も再生を押していない初回読み込みの時点で、.youtube.comのCookieを5個、.google.comのCookieを3個書き込みます。プライバシー強化モード（youtube-nocookie.com）の埋め込みではYouTube側の5個が消えますが、同じ名前のGoogleの3個は残ります。このウィジェットのカードは、標準の設定ではクリックされるまでプレーヤーを持たないので、動画を一度も再生しない訪問者のブラウザには、それらを書き込むフレームが読み込まれません。クリックすれば、訪問者はYouTubeのプレーヤーを受け取ります。それが求められたものだからです。Cookieの名前とスクリーンショットを含む検証の全体を公開しています。

YouTubeは、タイマーではなく、ウィジェットが実際に表示されたときに更新するソースです。誰も訪れないページのために、無駄な更新が走ることはありません。チャンネルや再生リストごとにプランで決まるキャッシュの有効期間があり、無料プランは24時間、Proは60分、Business以上は15分です。有効期間を過ぎたあとの最初の表示で更新が始まり、短い待ち時間のうちに終われば、その表示にそのまま新しい動画が並びます。間に合わなかった場合は更新がバックグラウンドで続き、次の読み込みから並びます。選んだ動画のリストは、意図して更新しません。

選べます。取り込まれた動画はすべて、承認・ピン留め・除外の操作があるモデレーションの画面に並び、テキストはその場で編集でき、キーワードルールに一致した動画は取り込まれた時点でページに出ないようにできます。新しい動画は標準ではそのまま表示され、フィードの設定で「Pre-approve posts」をオンにすると、承認した動画だけが表示されます。承認・除外・編集・キーワードルールはすべてのプランで使え、ピン留めは有料プランと無料トライアル中に使えます。取り込んだ動画をすべてトップページに載せたいことはまずないので、見せたい数本をピン留めして残りを外すのが普通の使い方です。

WordPress、Shopify、Wix、Squarespace、Webflow、Notion、Googleサイト、HTMLで作ったサイト、Reactです。外部スクリプトをサンドボックスに入れるビルダーもあれば取り除くビルダーもあるので、埋め込みダイアログが設置先を尋ね、その環境に合ったコードを渡します。STUDIO、Jimdo、ペライチなど一覧にないビルダーでも、HTMLを貼り付けられるブロックがあれば、HTML用のコードを試せます。WordPressなら、当社のプラグインを使えばコードを貼る必要もありません。

はい。YouTubeは有料オプションではなく、X（旧Twitter）を除くほかのすべてのプラットフォームと同じく、無料プランに入っています。Xが有料なのは、XがAPIの利用に料金を課しているという一点が理由です。無料プランには、連携できるソース1つ、40種類のうち7種類のレイアウト、16種類のテーマすべてとテーマビルダー、そして承認・除外・編集のモデレーションが含まれます。7日間のトライアルでは、クレジットカードなしでデザインスタジオのすべてを使えます。

できます。ひとつのフィードに10のプラットフォームを混ぜられるので、ライブの動画を、Instagramの写真、Facebookの投稿、Googleの口コミと同じセクションに並べられます。ライブハウスやスタジオなら、それこそが狙いです。動画が場の空気を見せ、口コミがチケット代に見合ったと伝えます。無料プランで連携できるソースは1つなので、複数のプラットフォームを混ぜたウォールは、7日間のトライアル中か有料プランで作れます。