ホームページにYouTube動画を載せるには、動画のURLと公開・埋め込みの条件を確認し、掲載するページと見せ方を決めます。WordPressならYouTubeブロック、HTMLを編集するサイトならYouTubeの共有画面から取得する埋め込みコードが基本の方法です。
ただし、管理画面に動画が表示されただけでは、訪問者が再生できることまで確認できません。この記事では、会社サイトへ動画を掲載したい担当者に向けて、基本手順、制作会社へ渡す情報、再生できないときの確認、公開後の差し替えまでを整理します。
先に、訪問者が視聴できる動画かを確認する
自社の動画を使う場合は、動画URL、内容の最新版、公開設定、外部サイトへの埋め込み許可を、動画の管理担当へ確認します。出演者や映り込む資料、音楽・画像なども、今回の公開に使える範囲を担当者と確かめます。YouTubeに置いてあることだけで、自社の掲載条件まで確認済みとは扱いません。
YouTubeの公開・非公開・限定公開の公式説明では、限定公開のURLを知る人は動画を見て、さらに共有できます。一般公開ページへ埋め込む動画を、限定公開だから社外秘にできると考えないようにします。非公開動画も、一般の訪問者へ見せる掲載方法としては使えません。
埋め込み許可を外した動画や、年齢制限のある動画などは、サイト内で視聴できない場合があります。YouTube上で自分が見られることと、サイトを訪れた人が見られることは分けて確認します。他社の動画を紹介する場合は、自社で公開設定や内容を変更できる前提にせず、提供元と掲載条件を確認します。
YouTube動画をホームページへ載せる基本手順
WordPressのブロックエディターを使う場合
掲載する投稿・固定ページを開き、動画を置きたい位置へ「YouTube」ブロックを追加します。動画のURLを入力して埋め込み、プレビューで再生枠と前後の文章を確認します。
詳しい操作はWordPress公式のYouTubeブロック案内で確認できます。編集権限やテーマ、独自のページ編集機能によって操作は異なります。ブロックが使えない画面なら、別の入力欄へコードを試し続けず、現在の編集方法を管理担当や制作会社へ確認します。
HTMLで埋め込む場合
パソコンで対象のYouTube動画を開き、「共有」から「埋め込む」を選び、表示されたHTMLコードを取得します。サイト側では、HTMLを扱える掲載箇所へ設置します。一般の文章欄にコードを入れると、文字として出たり、保存時に削除されたりすることがあります。
YouTube公式の埋め込み案内を基に、設置先の幅に合わせた再生枠とスマートフォン表示を制作担当に確認します。元のコードの横幅を固定したまま使い、ページからはみ出していないかも見ます。
プレビューで確認した後は、公開したページのURLで再生・停止、字幕、音量、全画面表示を試します。サイトやYouTubeの管理者としてログインした状態だけで終わらせず、通常の訪問者に近い環境でも確認します。
ページ内再生、YouTubeへのリンク、押して読み込む方式を選ぶ
埋め込みは、サイト内で本文を読みながら動画を見せたい場合の選択肢です。一方、動画の紹介画像や文字からYouTubeへ移動するリンクだけを置く方法もあります。ページの役割と、実装・確認にかける範囲をそろえて選びます。
| 載せ方 | 向いている使い方 | 依頼時に確認すること |
|---|---|---|
| ページ内へ埋め込む | サービスの説明を読みながら、工程や動きを見る | 再生条件、スマホの幅、前後の説明、読み込み |
| 画像や文字からYouTubeへリンク | 一覧から動画を選ぶ、外部で視聴する入口にする | リンク先の表示、紹介画像の使用条件、戻った後の案内 |
| 押した後にプレーヤーを読み込む | 初期表示では紹介画像を見せ、視聴操作後に動画を出す | 追加実装の範囲、操作の説明、再生できない場合の代替リンク |
三つ目は、通常のYouTubeブロックと同じ手順で必ず用意できる機能ではありません。現在のサイトに合わせた実装が必要か、見積もりで確認します。読み込みの違いは実際のページで比べ、特定の方式なら常に速いとは決めません。
自動再生を希望していなければ、訪問者が押して再生する仕様で依頼します。また、YouTubeのプレーヤーの公式仕様では、関連動画を完全に無効化できません。rel=0も、同じチャンネルの関連動画へ制限する設定です。「広告も関連動画も必ず出ない」という条件を、埋め込みだけで約束しないようにします。
プライバシー強化モードも、外部との通信をすべてなくす機能ではありません。利用するドメインやプレーヤーの条件を実装担当に確認し、サイトで使う同意管理の仕組みがあれば、その動作も合わせて確認します。設定名だけで「情報が一切送られない」と説明しないことが大切です。
動画の前後に「見る理由」と「次に確かめる情報」を置く
動画だけが置かれていると、会社紹介なのか、製品の使い方なのかを再生するまで判断できません。再生枠の前に、内容が分かる見出しと、見て分かることを短く添えます。必要な条件や対象者があれば、同じ場所で示します。
次の図は、架空の梱包資材会社が検品工程を紹介する配置例です。実在のページや動画ではなく、再生しなくても要点と次の案内が分かる構成を示しています。
動画の下には、内容の要点と、注文条件などを確認できるページへのリンクを置きます。映像で紹介した工程が、すべての製品や注文に適用されるかは内容の担当者が判断します。写真や文章でも説明できる条件を、動画の最後まで見なければ分からない状態にしないようにします。
音を出せない場面でも内容を追えるよう、用意した字幕と短い文字の説明を確認します。自動字幕がある場合も、社名・商品名・数値などが正しいかを見ます。施工説明などで対象品番や正式資料との対応が必要なら、動画と製品資料をそろえるページ設計も参考になります。
制作会社へ渡す、掲載依頼のメモ
依頼時には、動画の制作・編集と、ホームページへの掲載を分けます。撮影済みの動画を設置するだけなのか、字幕や紹介画像、周囲の文章も作るのかで、必要な作業は変わります。
| 渡す情報 | 記入する内容 |
|---|---|
| 掲載先 | ページURL、置きたい見出し・位置、対象ページ数 |
| 動画 | YouTube URL、動画の版、公開設定・埋め込み許可の確認状況 |
| 内容と材料 | 見て分かること、説明文、字幕、使える紹介画像。不足は未定と記載 |
| 見せ方 | ページ内再生か外部リンクか。未定なら比べたい条件 |
| 公開・更新 | 公開希望、社内確認者、動画とページの管理担当、差し替え予定 |
例えば、「サービスページの検品工程の見出し下へ、自社YouTube動画を1本載せたい。説明文は支給し、スマホの再生確認まで依頼したい。紹介画像と字幕は確認中。初期表示の読み込みも見て、通常の埋め込みと押して読み込む方式の作業差を教えてほしい」と伝えられます。これは依頼文の例で、料金や標準作業を示すものではありません。
見積もりでは、掲載、前後の文章、字幕・画像、端末別の確認、差し替え手順を項目ごとに確かめます。必要なら、ページ閲覧と動画再生をどう区別して計測するかも相談します。動画を貼るだけで再生の計測まで設定済みになるとは考えず、測れる内容と設定担当を決めます。
再生できないときは、動画・ページ・環境を分けて調べる
まずYouTubeの動画ページと、埋め込んだホームページを別々に確認します。動画自体が視聴できないなら、管理担当へ公開設定や視聴条件を確認します。YouTubeでは見られるのにサイト内で再生できないなら、掲載URLとエラー表示、端末・ブラウザ、発生時刻を制作担当へ渡します。
公式の埋め込み案内には、HTTPリファラーなどの埋め込み条件に関係する「エラー153」も説明されています。これは、リンク元に関する情報の扱いを確認するための手掛かりです。動画の削除や再投稿を先に行わず、ページ内で再生したときの状況を伝え、実装担当に調査を依頼します。
表示だけが崩れる場合は、再生の問題と分けて、掲載先の幅や動画の縦横比を確認します。同意操作後だけ再生しない、特定の社内回線だけ使えないなど、試した範囲も添えます。原因が分からない段階で、サイト全体の設定を一律に変えることを解決策にしません。
公開と差し替えでは、再生とページの説明を一緒に確認する
公開時は、通常の訪問者として動画を再生できること、スマートフォンで枠と操作が収まること、字幕と説明文が内容に合うこと、次に見るリンクが開くことを確認します。動画が見られない環境に備え、文字の要点やYouTubeで見る入口も、再生枠の外に用意します。
差し替えでは、掲載中の動画URLと掲載ページを記録してから、新しい動画の公開・埋め込み条件を確認します。URLだけでなく、見出し、要約、字幕、紹介画像、途中から再生する指定なども旧版のまま残っていないかを照合し、公開URLで再度再生します。
公開後の再生数と、サイトでの相談・応募は別々に見ます。動画を見たことだけで問い合わせが増えた原因と断定せず、説明文や次の案内も含めて見直します。みやあじよのコーポレートサイト制作では、会社の仕事やサービスの伝え方と掲載ページを整理できます。動画URLと対象ページ、分かっている条件を基に、必要な改修範囲を相談してください。