YouTube動画をブログへ埋め込む方法｜本文との役割分担とスマホ表示の確認

こんにちは。バナナデスクです。

ブログに動画を置くとき、再生ボタンのある動画枠、つまりプレーヤーを表示するだけで終わっていませんか。読者が知りたいのは、何を見る動画なのか、再生できなくても大事な条件が分かるのか、という点です。私は、動画で動きを見せ、本文にはあとから探し直したい条件を残すように考えます。

動画がすでにある場合は、「URLとコードの入れ先」→「スマホで読む大きさ」の順に読み、WordPressへの入力と表示を確認してください。これから自作する場合は、架空の教室向けに「対象者・提供内容・条件」の3枚のカードを並べる60秒の制作計画から読み進めましょう。

この制作例の動画はまだ収録しておらず、字幕と完成ファイルもありません。現在のWordPressテーマでの埋め込み再生とスマホ表示も未検証です。操作手順は公式資料に基づく案内で、カードの構成や秒数は収録前の計画です。

執筆：バナナデスク｜WEBビジネスの設計・集客・改善｜更新：2026年11月9日

動画URLと埋め込みコードは、別の入力欄へ入れる

「埋め込み」は、YouTubeにある動画をブログの記事内で再生できるように置くことです。動画のファイルをWordPressへ移す操作とは異なります。まず、使っている編集画面が、文章や見出しを部品ごとに置く「ブロックエディター」かを確認します。部品を追加する「＋」から「YouTube」を探せる画面なら、次の手順を使います。

ここからは、埋め込む動画がYouTube上に用意できてから行う操作です。今回のように収録前なら、次の節で3枚のカードを先に用意し、動画完成後にこの手順へ戻ってください。WordPress公式・YouTube埋め込みも、動画URLの入力、埋め込み、プレビューという順を案内しています。

1. 動画ページのURLをコピーします。URLは、インターネット上のページの住所です。パソコンで埋め込む動画をYouTube上に開き、ブラウザー上部のアドレス欄から、その動画ページのURLをコピーします。
2. 記事にYouTubeブロックを追加します。WordPressで試作用の下書き記事を開き、動画を置く位置の「＋」で「YouTube」を検索して選びます。動画URLを入れる欄が表示されたら次へ進みます。
3. URLだけを貼り、埋め込みます。URL欄へコピーした住所を貼り、「埋め込む」を押します。動画枠と再生ボタンが出れば、入力先の確認ができました。文字のリンクのまま、または埋め込み不可の表示なら、末尾の対処手順で入力欄と動画の条件を見直します。
4. 保存した記事をプレビューします。下書きを保存し、投稿の「プレビュー」で読者側のページ表示を開きます。プレビューとは、公開前に見え方を確かめる表示です。正しい動画が出るか、再生が始まるかを確認してから、前後の本文とスマホでの読みやすさへ進みます。

一方、YouTubeの「共有」から「埋め込む」を選ぶと、URLとは違うHTMLコードが出ます。HTMLは、ページに何を表示するかを指定する書き方です。その中のiframeは、別のサービスの再生枠を記事内に置くための記述です。YouTube公式・動画の埋め込みでは、表示されたHTMLコードをコピーしてサイトのHTMLへ入れる方法を説明しています。

コードを使う場合は、WordPressの「＋」から「カスタムHTML」ブロックを選び、HTMLの入力欄へコピーしたコード全体を入れます。「HTMLを編集」が表示される版では、それを開いて入力し、編集画面内の「更新」（Update）でブロックへ反映します。YouTubeブロックのURL欄へコード全文を貼る操作とは分けてください。コード側のプレビューに枠が出ても、保存後に投稿のプレビューを開き直すところまで確かめます。

カスタムHTMLでは、使っているアカウントの権限によってiframeが保存時に取り除かれる場合があります。入力中には見えた枠が保存後に消えたら、投稿を開き直してコードが残っているかを見ます。通常の埋め込みで足りるならYouTubeブロックへ戻し、コードが必要ならサイト管理者へ入力欄と保存時の制限を確認します。クラシックエディターという旧来の編集画面や、テーマ独自の入力欄を使う場合も、その欄がURL用かHTML用かを先に確かめます。

3枚の役割を決め、動画の前後に本文を用意する

ここで準備するのは、個別の顧客資料を使わない、架空の教室向けの説明です。紙やスライドの3枚に、次の見出しと内容を書きます。装飾を付ける前に、1枚ずつ何を判断してもらうかをそろえましょう。

1. 対象者：「商品を初めてネットで案内する教室」と書きます。見る人が、自分向けの案内かを最初に判断するカードです。
2. 提供内容：「見出しと説明文を3ページへ整理する」と書きます。何を受け取れるかを示します。原稿を整えることと、ウェブサイトを作って公開することを混ぜません。
3. 条件：「写真撮影・サイト実装は含まない」と書き、素材を渡す日、初稿日、価格、修正範囲を記入する場所を用意します。サイト実装とは、原稿などを実際のウェブサイトに組み込む作業です。初稿日は、最初の原稿を渡す日を指します。

この架空例には、価格、日付、修正できる回数などの具体値はありません。準備中の欄には「未定」と書き、実際に案内する内容が決まった時点で、カードと本文の両方へ同じ値を入れます。対象外としては、本文でも、写真撮影やサイト実装まで依頼したい場合はこの内容に含まれないことを明記します。

収録計画の表に出てくる「料金」は、料金を最初に見せる置き方にした条件カードのことです。「内容」は提供内容カードを指します。3枚のまま、最初の「料金・内容・対象者」から、最後の「対象者・提供内容・条件」へ並べ替える実演を計画します。

動画の直前に置く文章

動画の直前には、何に注目して見ればよいかを書きます。次は、完成した動画を置くときに使う文章例です。

次の実演では、ばらばらに置いた三枚を、初めて依頼する人が判断しやすい順へ並べます。注目するのは装飾でなく、料金を見る前に「自分向けの内容か」を確かめられるかです。

動画を見ない人にも残す説明

動画の直後には、同じ手順を文字だけでたどれる説明を置きます。次の文章を土台にし、確定した日付や価格、修正範囲は近くへ追記します。

最初に対象者を置きます。今回は「商品を初めてネットで案内する教室」です。次に、見出しと説明文を3ページへ整理する提供内容を示します。最後に、写真撮影やサイト実装を含まない条件、素材を渡す日、初稿日を並べます。条件によって選べなくなる人がいるなら、本文でも近くに明記します。

この2つの文章を用意したら、動画を見ないつもりで本文だけを読みます。「誰向けか」「何を受け取れるか」「含まれない作業と条件は何か」が答えられれば、動画を置く前後の文章がそろっています。答えられない項目は、カードの文字を増やし続けるより、本文の該当箇所へ具体的に補います。

0〜60秒の計画で、動きと本文の役割を合わせる

次の表は、収録する内容を4区間に分けた計画です。左の秒数は、すでに撮った動画の再生位置ではありません。最初に3枚を「料金・内容・対象者」の順で置き、対象者、提供内容、条件の順が伝わる動きを考えます。

最初の区間では、料金から見ても誰向けの何の案内かがつかみにくいことを示します。12秒以降は対象者を先頭へ移し、28秒以降に提供内容を続けます。最後は条件カードを末尾に置いて、3枚全体と本文の条件を照合する場面にします。「条件を最後へ置く」は、重要な条件を隠すという意味ではありません。選べなくなる条件は、カードと本文の両方で読めるようにします。

収録前にはカードを予定どおり動かしながら説明を読み、無理なく読める区切りかを確かめます。収録後、文字を読む時間や手元の動きに足りない区間があれば、説明を短くするか、区間の長さを見直します。60秒に収めるために、条件だけを読み取れない速さで流さないようにします。

完成動画には、話している内容を文字で見せる字幕を用意します。動画を管理する画面のYouTube Studioで、左メニューの「字幕」を開き、対象の動画と言語を選びます。自動字幕がある場合は内容を確認し、「編集」または自動字幕の「複製して編集」から直します。字幕がない場合は、言語を追加し、字幕の「追加」から手動入力などの方法を選びます。

この例なら、「3ページ」と「写真撮影・サイト実装は含まない」を、音声、カード、字幕、本文で照合します。自動字幕で「含まない」が落ちると案内の意味が変わるため、動画を再生しながら文字と表示のタイミングを確認して、字幕の編集画面で「公開」します。これは字幕を反映する操作で、動画の公開範囲は別に確認します。記事内でも字幕を表示して読み取れることを確かめてから、表示確認を終えます。

スマホでは、縦横の比率と文字の読みやすさを確かめる

「16:9」は、横16に対して縦9という映像の比率です。画面に合わせて小さくするときも、この関係が保たれれば、映像が縦や横へ引き伸ばされるのを避けられます。ただし、記事の幅より大きな固定幅を指定したiframeは、スマホで横にはみ出す原因になります。

WordPressではYouTubeブロックを選び、右側のブロック設定にあるメディア設定を見ます。「小さいデバイス用にサイズ変更」に相当する項目を有効にすると、画面幅に応じて比率を保つ設定になります。右側の設定が見えなければ、編集画面の設定ボタンを開きます。テーマ側の対応にも左右されるため、設定を入れた後は、保存した記事のプレビューを開き直します。

スマホでページを開き、動画が本文の幅からはみ出さず、再生ボタンなどを操作できるか確認してください。映像の16:9は横と縦の比率で、ボタンを含むプレーヤー枠の最低サイズとは別の条件です。

YouTubeの公式の技術資料では、埋め込みプレーヤーの表示領域は200×200ピクセル（px）以上で、操作ボタンも収まる大きさが必要です。テーマの設定でこの条件を満たせない場合は、サイト管理者に配置や表示方法を確認してください。

保存後のプレビューは、スマホを普段見る向きと拡大率で開いて確認します。次の順に見ると、どこへ戻って直すかを決めやすくなります。

1. 枠と本文を見ます。動画と前後の文章が本文幅に収まり、ページを横へ動かさなくても端まで見えるかを確認します。
2. 動画を再生してカードを止めます。対象者、3ページの提供内容、含まない作業が読めるかを確かめます。枠に収まっても文字が小さければ、カードの文字量を減らすか、必要なカードを大きく映す編集へ戻ります。
3. 操作部と字幕を使います。タイトル、再生ボタン、字幕、全画面表示が隠れていないかを見て、字幕を表示し、全画面から記事へ戻れるかを確かめます。字幕がなくても、前後の本文から条件が読めることも確認します。

この3つを確かめて、初めて「表示できた」に加えて「読めて使えるか」を判断できます。動画を複数並べる記事では、ページを開くまでや画面を送る操作が重くないかも見ます。管理画面に動画枠が出たことだけを、スマホでの再生確認の代わりにはしません。

プライバシー強化モードで変わる範囲を確認する

YouTube公式には、HTML内の埋め込み先のドメインをyoutube-nocookie.comへ変更する方法が案内されています。ドメインは、接続先を示す名前です。この設定を使う場合も、変更するのは埋め込みHTML側で、YouTubeブロックのURL欄へドメイン名だけを入れる操作ではありません。

プライバシー強化モードでは、その埋め込み動画の視聴情報がYouTubeの閲覧体験のカスタマイズに使われません。広告が表示される場合もカスタマイズされず、その視聴情報をサイト外の広告のカスタマイズにも使わない、という説明です。「広告が一切出ない」「データ送信や追跡がすべてなくなる」という意味ではありません。

プレーヤーから別のサイトやアプリへ移動した後は、移動先の規約などが適用されます。サイトで行うデータの扱いの説明や、必要な同意の管理を、ドメインを変えるだけで済ませたことにはしません。モードを変えた後も、同じ記事のプレビューで再生と字幕を再確認します。

出ている表示を記録し、原因に合う場所へ戻る

動画が表示されないときは、まず、文字のままなのか、エラー番号が出るのか、枠は出ても読めないのかを見ます。表示された文言と、使ったブロック名をメモしてから、次の表で戻る場所を探してください。表のCSSは、幅や余白などの見た目を決める記述のことです。HTTPリファラーは、どのページから動画が呼び出されたかを伝える情報です。

• URLが文字のまま：通常の文章欄へ入れたのか、YouTubeブロックのURL欄へ入れたのかを確認します。動画ページのURLをYouTubeブロックへ入れ直し、「埋め込む」を押して保存します。HTMLコードを入れていた場合は、カスタムHTML側へ戻します。保存後に動画枠が出るかを確かめます。
• 埋め込み不可：動画がYouTube上で開けるか、埋め込みが許可されているかを確認します。自作動画ならYouTube Studioの「コンテンツ」から動画の「詳細」を開き、「すべて表示」で「埋め込みを許可する」を見ます。非公開の動画は埋め込めず、年齢制限のある動画も外部サイトでの視聴が制限されます。動画側の条件を整えてから、記事内で再度確かめます。
• 横へはみ出す：YouTubeブロックのメディア設定へ戻り、固定幅の指定やテーマの幅を確認します。自分で判断できないテーマのCSSは、使ったブロックと問題が出る画面幅を管理者へ伝えます。修正後は同じスマホの表示に戻って、はみ出しと操作部を確認します。
• 再生できるが読めない：文字の小さい場面を止め、カードを大きく映す、文章を短くする、字幕を修正する、のどこへ戻るかを決めます。本文側の条件も直し、もう一度、通常のスマホ表示で照合します。

エラー153は、入力欄の違いとは別に確認します。YouTubeの公式説明では、HTTPリファラーなど、埋め込み元を識別する情報が送られない場合に153が発生します。埋め込みプレーヤーのURLをブラウザーのアドレス欄へ直接入れた場合も、通常はHTTPリファラーが送られません。

まず、プレーヤー単体のURLではなく、WordPressで保存した記事のプレビューへ戻って再生します。記事内でも153が出る場合は、記事を開いた場所、ブラウザー、使ったブロック、エラー番号を控え、サイト管理者にHTTPリファラーの送信を抑える設定がないか確認してもらいます。設定を直したら、同じ記事内で再生し直します。単体URLでのエラーだけから、動画そのものや記事内の埋め込みが壊れていると判断しないようにします。

収録前にそろえるのは、3枚の役割、動かす順番、見る目的、再生しない場合の本文です。動画完成後は、入力欄、保存後の再生、字幕、スマホでの読みやすさの順に確認します。うまくいかない表示があれば、その表示に合う工程へ戻って直せるようにしておきましょう。

関連記事：顔出しなしでYouTube集客を始める方法｜専門知識を伝える動画の作り方

まず、手元の3枚を「対象者・提供内容・条件」の順に並べ、本文だけを読んでも同じ3点を答えられるか照合してみてください。