ホームページにYouTubeを埋め込む方法｜16ページに同じ動画を「章の秒から」差し込んだ実例

公開日：2026年10月20日

先に結論です。ホームページにYouTubeを埋め込むなら、1本の動画をどのページにも頭から再生する形で貼るのではなく、記事ごとに「その記事に関係する章の秒」から再生させてください。そして、ページを開いた時点ではサムネイル画像だけを出し、押されたときにプレーヤーを読み込む形にします。みやっち🧑‍💻は、株式会社AI Orchestraの会社ホームページで、1本の動画を16ページに差し込むときにこの形にしました。

ホームページにYouTubeを埋め込むとは YouTubeの動画ページの「共有」→「埋め込む」で表示されるHTMLコード（iframe）を、自社のホームページやブログのHTMLに貼り付け、ページの中で動画を再生できるようにすることです。埋め込みのURLに start（開始秒）を足すと途中から再生でき、ドメインを youtube-nocookie.com に変えるとプライバシー強化モードになります。

ホームページを持っていて、YouTubeも始めた（始めたい）経営者・個人事業主・士業に向けて、基本の手順と、実際に差し込んだときに決めたことを順に書きます。

ホームページにYouTubeを埋め込む基本の手順

YouTube公式ヘルプ「動画や再生リストを埋め込む」の手順は、次の3つです（2026年10月時点）。

埋め込みたい動画をパソコンで開き、「共有」を押す
共有の選択肢から「埋め込む」を選ぶ
表示されたHTMLコードをコピーして、ホームページのHTMLに貼り付ける

途中から再生したいときは、埋め込みのURLに ?start= と秒数を足します。公式ヘルプの例では、1分30秒から再生するなら 90 です。開発者向けのプレーヤーのパラメータの説明では、start は「動画の先頭から何秒の位置で再生を始めるか」を正の整数で指定するもので、実際の再生はその少し前（通常は2秒以内）のキーフレームから始まることがある、と書かれています。

プライバシー強化モードにするには、埋め込みURLのドメインを youtube.com から youtube-nocookie.com に変えます。公式ヘルプによると、このモードの埋め込みプレーヤーで見た動画は、YouTubeでの閲覧体験のカスタマイズや広告のカスタマイズに使われません。ただし、プレーヤーから別のサイトやアプリへ移った後は、移った先のポリシーに従って行動が記録されることがある、という留保も付いています。

2つを組み合わせると、埋め込みのURLは次の形になります（動画ID の部分は実際の動画のIDに置き換えます）。

<iframe src="https://www.youtube-nocookie.com/embed/動画ID?start=90" width="560" height="315" title="動画のタイトル" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

WordPress・Wix・ペライチなどのホームページ作成サービスには、それぞれ動画を入れるための部品や手順があります。サービスごとの操作は各サービスの公式ヘルプを見てください。この記事では、AIに自社サイトを直してもらうときに何を決めて、何を指示すればいいかを中心に書きます。

会社ホームページの16ページに1本の動画を差し込んだ実例

みやっち🧑‍💻は2026年10月、Claudeのチームプランの使い方を解説した動画（9分56秒）を、株式会社AI Orchestraの会社ホームページにも差し込みました。差し込んだのは特集ページ1本と関連コラム15本、計16ページです。作業はClaude Codeに任せ、2026年10月7日〜8日に入れました。

狙いは単純です。企業のホームページは、どうしても文字ばかりになります。そこに記事と一対一で対応する動画があれば、文字を読むのが面倒な人にも、動画で同じ内容を受け取ってもらえる。みやっち🧑‍💻は差し込んだ直後に「もう最強ですよ」と書いていますが、これは手応えとしての感想で、閲覧数や問い合わせの変化を計測した結果ではありません。

置き場所は、記事ではリード文の直後にしました。特集ページでは「比較している段階の読者向け」の枠の直後です。冒頭で「この記事は何の話か」を読んだ人が、そのまま動画に進める位置です。

記事ごとに「関係する章の秒」から再生させる

16ページに同じ動画を入れるとき、全部を頭から再生させると、どのページでも冒頭の同じ話から始まります。料金のコラムを読んでいる人に、使い始めの話から見せることになる。

そこで記事ごとに、その記事に関係する章の秒数から再生するようにしました。料金の記事なら料金の章から、設定の記事なら設定の章から始まります。仕組みは先ほどの start パラメータで、ページごとに秒数だけを変えています。

ただし、関係する章がない記事もありました。関連コラム15本のうち4本は、動画で扱っていない主題です。この4本は、全体像を見せる特集ページと同じく冒頭から再生し、「この記事の内容を解説した動画」とは書かないようにしました。無理に近い章へつなぐと、読者が期待した話と違う場面から始まりやすいためです。

動画のIDは1か所で管理し、16ページはそこを参照する形にしました。仮の値が入っている間は、動画の枠そのものを表示しません。動画を差し替えたくなったときも、直すのは1か所です。

最初はサムネイルだけを出し、押されたらプレーヤーを読み込む

YouTubeの埋め込みコードをそのまま貼ると、ページを開いた時点でプレーヤーを読み込みます。16ページすべてでそれが起きるのは避けたかったので、会社ホームページでは次の形にしました。

ページを開いた時点では、動画のサムネイル画像と再生ボタンだけを表示する
押されたときに、youtube-nocookie.com のプレーヤー（iframe）に差し替えて再生する

この形は「ファサード方式」と呼ばれることがありますが、名前を覚える必要はありません。AIには「最初はサムネイルだけ表示して、クリックされたらYouTubeのプレーヤーに差し替えて」と書けば伝わります。このサイト（AI Crew）の動画つき記事の先頭にあるプレーヤーも、押すまでYouTubeを読み込まない作りです。

ここで言えるのは「ページを開いただけではプレーヤーを読み込まない」という仕組みまでです。表示速度や検索順位がどれだけ変わったかは計測していないので、「速くなる」「SEOに効く」とは書きません。

パソコンで見るとサムネイルがぼやける問題

本番に出した後、みやっち🧑‍💻がパソコンで見て気づいたのが画質です。「パソコンから見た場合、YouTubeのサムネイルの画質が悪くないですか？」とClaude Codeに伝えて直しました。

最初は、YouTubeが用意している480×360のサムネイル画像を使っていました。パソコンの広い記事幅に引き伸ばすと、これがぼやけて見えます。これを1280×720の高画質版に変え、高画質版が用意されていない動画では480×360に戻す処理を入れました。

スマホで確認して終わりにせず、公開後にパソコンの幅でも実際に見る。サムネイルを自前で出す形にしたときは、特にここを確かめてください。YouTube側のサムネイルそのものの作り方は、YouTubeのサムネイルをAIで作る方法にまとめています。

埋め込んだYouTubeが表示されない・再生されないときに見るところ

「貼ったのに表示されない」「再生できない」ときは、ホームページ側より先に動画側の状態を確かめます。

動画が公開されているか：予約公開の動画は、公開時刻までは埋め込み先でも再生できない前提で進めます。会社ホームページでも、動画の公開を確かめてから本番に反映しました
埋め込みが許可されているか：公式ヘルプによると、動画の所有者は「埋め込みを許可する」をオフにできます。自分の動画なら、動画の設定で「埋め込みを許可する」がオンになっているかを確認します
年齢制限が付いていないか：公式ヘルプでは、年齢制限のある動画はYouTube外の一般的なサイトでは視聴できないとされています
「エラー153」が出ていないか：公式ヘルプでは、埋め込み先の情報（HTTPリファラー）が送られないと再生がブロックされ、このエラーになると説明されています。埋め込みプレーヤーのURLを直接開いた場合も、通常はこの情報が送られずエラー画面になるとされているので、確認は実際に埋め込んだページで行います

会社のネットワークで見られない場合は、公式ヘルプのとおり、ネットワーク側でyoutube.com（プライバシー強化モードなら youtube-nocookie.com も）が許可されているかも確認します。

「動画を貼る」から「記事と動画を対にする」へ

状態の変化で言うと、こうです。

これまで：ホームページは文字の記事が並び、YouTubeは別の場所にある。動画を貼るとしても、どのページにも同じ動画を頭から
差し込んだあと：記事を読みに来た人が、関係する章がある記事ならその話から始まる動画を、その場で再生できる。動画を差し替えるときは1か所を直すだけ

ここで手間がかかるのは、埋め込みコードを貼る作業そのものより、16ページそれぞれについて「どの章が関係するか」を決め、同じ作りで漏れなく入れることです。ホームページ作成サービスの編集画面で1ページずつ貼ると、秒数の入れ間違いや入れ忘れが起きやすくなります。Claude Code・Codexのように、ホームページのファイルをまとめて読んで直せるAIエージェントなら、「この動画の章立てと各記事を突き合わせて、関係する章の秒から再生する枠をリード文の直後に入れて」と頼めます。会社ホームページでも、各記事の開始秒はClaude Codeが動画の書き起こしで確かめ、16ページに同じ作りで入れました。人に残る仕事は、どの動画をどのページに差し込むかを決めることと、公開後の見え方を確かめることです。

AIでホームページを作る段階の選び方はホームページをAIで作る方法3つの比較に、実際に4時間で公開した記録はClaude Fable 5でホームページを4時間で公開した実録に書いています。そもそも自社サイトに記事をためる意味はオウンドメディアはAI時代に意味ないのかで整理しました。

よくある質問

YouTubeを埋め込むと、ホームページのSEOに効きますか

みやっち🧑‍💻は、動画を埋め込んだことで検索順位がどう変わったかを計測していないため、効くとも効かないとも言えません。この記事で勧めているのは、検索対策としてではなく、記事を読みに来た人が同じ内容を動画でも受け取れるようにするための埋め込みです。

自動で再生させたほうがいいですか

開発者向けの公式ドキュメントでは、autoplay を有効にすると、閲覧者が操作しなくても再生が始まると注意書きがあります。会社ホームページでは、ページを開いただけでは再生されず、読者がサムネイルを押したときに初めてプレーヤーを読み込んで再生する形にしました（押した後にもう一度再生ボタンを押さなくて済むよう、差し替えたプレーヤーには autoplay を付けています）。

自分の仕事を、Claude Code・Codexで動く形に作り替える。そのやり方を講座では扱っています。まず無料セミナーでお会いしましょう。