YouTube埋め込みコード生成

このYouTube埋め込みコード生成は、YouTubeの動画、ショート、再生リストをWebサイトに載せるためのHTMLを作ります。YouTube標準の「共有」→「埋め込む」の画面にはないオプションにも対応していて、開始・終了時間、自動再生（ブラウザが許可するミュート自動再生を含む）、ループ、字幕、プライバシー強化モード、どの画面にも収まるレスポンシブなサイズを指定し、コードをコピーしてページに貼り付けるだけです。ライブプレビューで、プレーヤーを確認しながら調整できます。処理はすべてブラウザ内で行われ、Marqlyには何も送信されません。どのオプションも、YouTube公式のプレーヤーのリファレンスに記載されたパラメーターに対応しています。

YouTube動画をWebサイトに埋め込む方法

1. YouTubeから動画のリンクをコピーします。視聴ページ、ショート、ライブ配信、youtu.beのリンク、list=を含む再生リストのリンクのどれでも使えます。
2. 上の欄に貼り付けます。リンクに?t=90のようなタイムスタンプがあれば、開始時間が自動で入力されます。
3. オプションを選びます。コードとプレビューは、すぐに更新されます。
4. 「コードをコピー」を押して、ページのHTMLに貼り付けます。WordPressではカスタムHTMLブロックに、ほとんどのサイト作成ツールでは、埋め込みまたはHTMLの要素に貼り付けます。

すべてのオプションと、対応するパラメーター

開始時間と終了時間

YouTubeのプレーヤーは、開始時間と終了時間を整数の秒で受け取るため、生成ツールは入力された90、1:30、1:02:03、1h2m3sのどの形式も秒に変換します。どちらも動画のいちばん最初から数えます。1:30から2:00までのクリップを再生したいときは、開始を1:30、終了を2:00と入力してください。終了を0:30にしてはいけません。埋め込みではなく、リンクとして特定の場面を共有したいときは、YouTubeタイムスタンプリンク生成を使ってください。

埋め込み動画が自動再生されない理由と、その対処

動画が自動で始まってよいかどうかは、ブラウザが判断します。YouTubeのIFrame APIのドキュメントでは、ユーザーの操作なしでのミュートしない再生が、ブラウザがブロックするケースの1つに挙げられているため、autoplay=1だけでは何も起きないことがよくあります。確実なのは、ミュートで始めることです。「ミュート自動再生（JavaScript API）」を選ぶと、生成ツールは、埋め込みに加えて、YouTube公式のIFrame Player APIを読み込み、プレーヤーの準備ができたらミュートにして再生を始める短いスクリプトを出力します。訪問者は、ワンクリックでミュートを解除できます。

APIクライアントに対するYouTubeの規則には、守るべき条件がさらに2つあります。プレーヤーの半分以上が画面に表示されるまで、自動再生を始めてはいけないこと、そして同じページで、複数のYouTubeプレーヤーを同時に自動再生してはいけないことです。ページの先頭にあるメイン動画なら問題ありませんが、ページのずっと下にある動画の自動再生はいけません。

プライバシー強化モード（youtube-nocookie.com）

プライバシー強化モードは、埋め込みURLのwww.youtube.comをwww.youtube-nocookie.comに置き換えます。YouTubeのヘルプによると、埋め込み動画の視聴が視聴者のYouTubeでの閲覧体験に影響することを防ぎ、パーソナライズされていない広告を表示し、その視聴があなたのサイト以外で視聴者に表示される広告のパーソナライズに使われることを防ぎます。費用がかからないので、このツールでは最初からオンにしています。ただし、この設定は、埋め込みがCookieを設定しないことや、トラッキングをしないことを約束するものではなく、それだけで埋め込みがどこかの国のプライバシー関連の法律に準拠することにもなりません。どちらの設定でも、プライバシーポリシーや同意の仕組みには、YouTubeを記載してください。

ショートを含む、レスポンシブなYouTube埋め込み

標準のiframeは、560 × 315に固定されていて、スマートフォンではあふれてしまいます。「レスポンシブ」をオンにすると、コードはプレーヤーを親要素の幅の100%にし、CSSのaspect-ratioプロパティで形を保ちます。現在のどのブラウザでも、padding-bottomを使ったラッパーは要りません。ショートには9:16を選ぶと、縦型の動画に黒い帯が出ません。その場合、幅の欄で、どこまで広がるかの上限を決められます。YouTubeは、埋め込みプレーヤーに少なくとも200 × 200ピクセルを求め、16:9のプレーヤーには少なくとも480 × 270を推奨しているため、生成ツールは幅200ピクセルを下回る値にはしません。

ページを軽くする、クリックで読み込む埋め込み

YouTubeのiframeは、ページを読み込むとすぐにプレーヤー全体を読み込むため、ほとんどの訪問者が再生しない動画があるページでは負担になります。「クリックで読み込み」の出力は、再生ボタン付きの動画のサムネイルを表示し、誰かがクリックしたとき（またはEnterキーを押したとき）に初めて本物のプレーヤーに差し替えて、再生を始めます。ページの速度が上がり、訪問者が見ると決めるまで、プレーヤーには何もリクエストされません。この方式は、1本の動画で使えます。再生リストでは、標準のiframeを使います。

もう動かなくなったパラメーター

• modestbrandingは非推奨で、効果がありません。いまはYouTubeがプレーヤーのサイズなどの情報からブランド表示を決めています。まだこれを提供している生成ツールは、古いものです。
• showinfoは2018年に非推奨となり、ドキュメントから削除されました。
• rel=0は、2018年9月25日以降、関連動画を非表示にできません。同じチャンネルのものに限定するだけです。
• controls=2は非推奨です。0か1を使ってください。

埋め込みが動かないときの対処

• エラー153や、空白のプレーヤー。YouTubeは、埋め込みに対して、HTTPのRefererヘッダーで設置先のサイトを示すことを求め、strict-origin-when-cross-originのリファラーポリシーを推奨しています。生成されたコードにはそのポリシーが設定されていますが、サイト全体でno-referrerを送っていると、プレーヤーが動かないことがあります。
• 「動画を利用できません」と表示される。投稿者がその動画の埋め込みをオフにしているか、非公開や削除済みか、訪問者の国でブロックされている可能性があります。これを変えられるのは、投稿者だけです。
• プレーヤーが途中で切れる、または小さい。高さが固定されている親要素やoverflow: hiddenが、プレーヤーを切り取っています。レスポンシブをオンにしているときは、コンテナに幅を指定し、高さは自動に任せてください。
• ループが繰り返されない。1本の動画では、URLに同じ動画IDのplaylist=を含める必要があります。loop=1を手で付け足さず、生成されたコードをコピーしてください。

関連するYouTubeツール

再生を始めたい場面を見つけるには、YouTube文字起こしツールが便利です。長い動画の埋め込みには、チャプター生成でチャプターを加えられ、カスタムのポスター画像はサムネイルダウンローダーで保存できます。講座全体を埋め込むなら、再生リストの長さ計算で、訪問者に全体の長さを伝えられます。