YouTube動画の埋め込み：WordPress、HTML、プライバシー

YouTube動画を埋め込むには、埋め込みコードをウェブサイトのHTMLブロックに貼り付けます。パソコンで動画を開き、「共有」から「埋め込む」を選びます。そこに表示されるコード全体をコピーしてください。WordPressでは通常、通常の動画リンクをYouTubeブロックに貼り付けられます。これで訪問者はあなたのページ上で動画を視聴できます。

以下では、あなたのウェブサイトに合った方法と、スマートフォンで動画をテストする方法を説明します。

YouTubeリンクまたは埋め込みコードを使う

埋め込みは「embed」とも呼ばれます。これにより、動画をYouTubeに置いたまま、ページ上に動画プレーヤーを表示できます。そのため、動画ファイルをウェブサイトにアップロードする必要はありません。

通常のリンクを使うと、訪問者は動画ページに移動します。埋め込みコードを使うと、自分のページ上にプレーヤーを表示できます。ウェブサイトビルダーによっては、通常の動画リンクから自動的にプレーヤーを作成するものもあります。

何をしたいですか？	何を使いますか？
動画へのクリック可能なリンクを配置する	通常の動画リンク
動画ブロックから動画を追加する	通常の動画リンクが基本です
HTMLにプレーヤーを自分で配置する	iframeを含む埋め込みコード

iframe iframe は、別のウェブサイトのコンテンツを表示するウィンドウです。ここではYouTubeの動画プレーヤーを指します。HTMLは、ウェブページにコンテンツを配置するためのコードです。

YouTubeの埋め込みコードを配置する

パソコンで動画を開きます。そうすれば、コードをコピーして、すぐにウェブサイトでテストできます。

動画を確認します。 タイトルを確認し、少し再生します。
「共有」で「埋め込む」を選びます。 コード全体をコピーします。
ウェブサイトのエディターを開きます。 動画を配置したいページに移動します。
HTMLまたはカスタムコード用のブロックを追加します。 埋め込みコードをそこに貼り付けます。通常のテキストボックスには貼り付けないでください。
ページのプレビューを表示します。 プレーヤーが表示されましたか？再生ボタンもテストしてください。

ボタンや画面は変更されることがあります。「埋め込む」オプションが見つからない場合は、画面を次の内容と比較してください。 YouTube公式の埋め込みに関する説明.

ウェブサイトビルダーから動画URL、つまりウェブアドレスだけを求められた場合は、通常の動画リンクを使います。その欄にHTMLコードを入力してはいけません。

WordPressにYouTube動画を埋め込む

WordPressでブロックを使っていますか？その場合、YouTubeブロックが通常は最も簡単です。埋め込みコードを自分で編集したい場合は、カスタムHTML用のブロックを使います。

YouTubeブロックを使う

エディターで投稿またはページを開きます。
ブロックを追加し、YouTubeを検索します。
通常の動画リンクを欄に貼り付けます。
入力を確定し、ページのプレビューを表示します。

別のエディターや専用のページビルダーを使っていますか？その場合は動画ブロックを探してください。名称や場所はウェブサイトによって異なる場合があります。

カスタムHTML用ブロックを使う

カスタムHTML用のブロックを追加し、そこに埋め込みコード全体を貼り付けます。その後、コードを編集して、たとえばスマートフォンでプレーヤーを適切に表示できます。後ほど例を紹介します。

保存後にコードが消えますか？ウェブサイトの管理者に、あなたのアカウントでiframeコードを配置できるか、またウェブサイトがそのコードを許可しているか確認してください。

プライバシーモードでYouTube動画を埋め込む

プライバシーモードでは、ドメイン www.youtube-nocookie.com を埋め込みコードで使います。これは以下のコード例にすでに記載されています。

このモードは、動画が完全にCookieなしで動作することを保証するものではありません。また、これだけでウェブサイトがすべてのプライバシー規則に準拠するわけでもありません。プレーヤーをいつ読み込むかも重要です。

「 Cookieと同意に関するベルギーの説明」によると、厳密には必要でないCookieやトラッカーについては、通常、事前の同意が必要です。訪問者は何に同意するのかを理解し、自分で明確に選択できなければなりません。

プレーヤーの読み込み前にウェブサイトで同意を求める必要がありますか？その場合は、同意後にiframeが読み込まれるようにウェブサイトを設定してください。すでに読み込まれたプレーヤーの上にCookie通知を表示しても、プレーヤーは停止しません。

まず、説明付きの空の動画枠を表示することもできます。例：「この動画はYouTubeから読み込まれます」。プレーヤーが本当に同意後にのみ読み込まれるか、ウェブサイト管理者に確認してもらってください。以下のサンプルコードだけでは、その処理は行われません。

埋め込んだYouTube動画をモバイル向けに調整する

固定幅のプレーヤーは、スマートフォンでページの外にはみ出すことがあります。このサンプルコードを使うと、プレーヤーは配置した枠と同じ幅になります。

<div style="width:100%; aspect-ratio:16/9;">
  <iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    title="Uitleg over het verzorgen van kamerplanten"
    style="width:100%; height:100%; border:0; display:block;"
    allowfullscreen>
  </iframe>
</div>

次を置き換えます。 VIDEO_ID あなたの動画のコードに置き換えます。コピーした埋め込みコード内で、 /embed/ の直後、疑問符がある場合はその前に記載されています。また、 title の後のテキストを、動画の短い説明に変更してください。

比率 16/9 は横向きの動画枠を作ります。縦向きの動画には、たとえば 9/16 を使えます。その後、広い画面で枠が不必要に大きくならないか確認してください。

続いて、スマートフォンでページをテストします。

横方向にスクロールしなくても、動画がページ内に収まっているか確認します。
再生ボタンと全画面ボタンをテストします。
Cookie通知や別のウィンドウがボタンを覆っていないか確認します。

埋め込んだYouTube動画の開始時間を設定する

動画の冒頭を飛ばしたいですか？ start を次のアドレスに追加します。 src。開始時間は秒数で指定します。これにより、動画の開始位置を選べます。動画が自動再生されるわけではありません。

架空の例として、表示したい説明が1分30秒後に始まるとします。次のように計算します。 1 × 60 + 30 = 90秒.

src="https://www.youtube-nocookie.com/embed/VIDEO_ID?start=90"

アドレスの後ろに設定を含む疑問符がすでにありますか？その場合は疑問符をつ使わないでください。HTMLコードでは、既存の設定の後に &start=90 を追加します。

ページを保存し、動画がどこから始まるか確認します。動画終了後にもう一度再生したい場合は、 YouTube動画を繰り返し再生する方法.

埋め込んだYouTube動画をアクセシブルにする

動画の重要な情報は、ページ上にもテキストで記載してください。そうすれば、音声を聞けない訪問者やプレーヤーを使えない訪問者も、その情報を読めます。

iframeに分かりやすいタイトルを付けます。 「 title には、たとえば「観葉植物の手入れ方法の説明」と記載し、「動画」だけにしないでください。これにより、支援技術がウィンドウの内容を伝えられます。
字幕が利用できる場合はテストします。 字幕をオンにし、名前、数字、誤認識された単語に注意します。
重要な説明を書き起こします。 説明動画の場合は、手順をページ上に簡潔に記載できます。
マウスを使わずにテストします。 Tabキーを使います。プレーヤーに移動でき、どのボタンを選択したか確認できるかテストしてください。

できれば、訪問者自身に再生ボタンを押してもらいます。そうすれば、訪問者がまだ読んでいる間に音声が始まりません。

埋め込んだYouTube動画が動作しない

まずYouTubeで動画を開きます。そこでも動作しませんか？その場合はまず動画自体を確認します。そこで再生できる場合は、ウェブサイトのコードと設定を確認してください。

何が表示されますか？	何ができますか？
コードがページ上にテキストとして表示される	コードをテキストブロックではなく、HTMLブロックに貼り付けます。
クリック可能なリンクだけが表示される	動画ブロックを使うか、埋め込みコードをHTMLブロックに配置します。
プレーヤーにエラーメッセージが表示される	メッセージを読みます。また、動画の完全なコード、つまり動画IDが埋め込みコードに含まれているか確認してください。
動画をウェブサイトで再生できない	所有者に埋め込みが許可されているか尋ねます。これはプレーヤーの通常の設定では解決できません。
動画枠が空白のままになる	プレーヤーを読み込むために、まだ同意が必要か確認します。別のブラウザーでもテストしてください。
保存後にプレーヤーが消える	管理者またはエディターに、セキュリティ機能がiframeコードを削除していないか確認します。
スマートフォンで動画の幅が広すぎる	ページ幅に合わせて変化するコードを使います。プレーヤー周辺の枠の幅も確認してください。

自分の動画を削除したいですか？まず、どのページに埋め込んだか確認します。 YouTube動画を削除する方法その後、ウェブサイト上の参照も変更します。

公開前にページを確認する

ログアウトした状態でもページを表示します。できればプライベートウィンドウを使ってください。ログイン中の管理者に表示される内容だけでなく、訪問者に表示される内容も確認できます。

正しい動画が表示され、開始時間も合っているか確認します。スマートフォンでの表示と、必要な同意をテストします。最後に少し再生し、音声を確認してください。

まず自分の動画を投稿し、その後ウェブサイトで使いたいですか？その場合は、 YouTubeチャンネルを始める方法.

ウェブサイトまたはWordPressにYouTube動画を埋め込む