PR

WordPressでYouTubeを埋め込む3つの方法と失敗しない設定術

ワードプレス

 

はじめまして。当ブログ管理人の後藤です。

2025年のも残りわずかとなりましたね。最高の2026年を迎えるために今からブログで稼ぐ仕組みを作りませんか?


あっさり10万稼ぐためのメルマガ

 

さて、本題に入ります。

 

 

WordPressの記事にYouTube動画を入れたいのに、なぜかうまく表示されなくてモヤモヤしていませんか。私も最初にWordPressにYouTube動画を埋め込んだとき、サイズが崩れたり真っ白になったりして、原因探しにかなり時間を使いました。

このページでは、そんな過去の私と同じ状況の人に向けて、次のようなポイントをまとめています。

この記事で分かること

  • WordPressでYouTube動画を埋め込む3つの基本パターン
  • 表示されない、レイアウトが崩れるといったトラブルを防ぐコツ
  • サイトの目的に合わせた埋め込み方法の選び方
  • 表示速度を落とさずに動画を見せる工夫

結論から言うと、基本の型さえ押さえておけば、むずかしいコードを覚えなくても、WordPressでYouTube動画を安心して使いこなせます。

 

  ブログ収益化の教科書プレゼント

↓ ↓ ↓

ba15a

 

WordPressでYouTubeを埋め込みするときにまず知っておきたいこと

ごとう
ごとう

最初のパートでは、「そもそもなぜWordPressにYouTube動画を埋め込むのか」「やってはいけないことは何か」という前提を軽く整理しておきます。ここを押さえておくと、あとで迷いにくくなります。

wordpressでyoutubeを埋め込んだらできること・メリット

WordPressの記事にYouTube動画を入れると、ただのテキストページが一気に立体的になります。具体的にどんな場面で役立つのかをイメージしてもらうために、代表的な使い方と期待できる効果を表にしました。

用途 具体例 期待できる効果
商品レビュー ガジェットを実際に使っている様子を動画で紹介 文章だけより説得力が増え、購入ボタンのクリック率アップが期待できる
ハウツー記事 ツールの操作手順や設定方法を画面録画で解説 読者が迷いにくくなり、途中離脱を防ぎやすい
セミナー・講座 オンラインセミナーや講座のアーカイブ動画 復習用コンテンツになり、資料請求や問い合わせにもつなげやすい
採用・会社紹介 オフィスツアーや社員インタビュー動画 会社の雰囲気が伝わり、応募のハードルを下げられる

こんなふうに、YouTube動画は「動き」や「空気感」を伝えるのが得意です。テキストでは伝わりづらい部分を補ってくれるので、読者の理解度や納得感をぐっと高めてくれます。

さらに、動画を見てもらうことでページの滞在時間が伸びやすくなり、結果的に検索評価にも良い影響が出ることがあります。ただし、動画を貼っただけで急に順位が上がるわけではないので、あくまでプラス要素くらいの感覚で捉えておくと気持ちが楽です。

YouTube動画をサーバーに直接アップしない方がいい理由

たまに「WordPressのメディアに動画ファイルをそのままアップして使えばいいのでは」と相談されますが、これは基本的におすすめしません。私も昔、試しにやってみてページの重さに泣いたことがあります。

動画ファイルはサイズが大きく、サーバーの容量や転送量を一気に食い尽くします。その結果、ページの読み込みが遅くなり、サイト全体の表示速度に悪影響が出ることもあります。

一方、YouTube側に動画の本体を置き、WordPressには再生プレイヤーだけを読み込ませる形にすれば、サーバーへの負担をかなり減らせます。WordPressは「見せ方担当」、YouTubeは「動画の保管と配信担当」と役割分担した方が、お互いにとって健康的です。

WordPressでYouTubeを埋め込む3つの基本パターン

ごとう
ごとう

ここからは、実際にWordPressの記事にYouTube動画を入れる方法を3つに分けて紹介します。どれも特別な知識がなくてもできるものなので、「自分に合いそうだな」と思うものから試してみてください。

URLを貼るだけでWordPressにYouTubeを埋め込む方法

一番かんたんなやり方が、YouTubeの動画ページのURLをそのまま貼る方法です。ブロックエディタなら、段落ブロックにYouTubeのURLをペーストすると、自動的に動画プレイヤーに変わります。

流れとしては、次のようなイメージです。

  • YouTubeで埋め込みたい動画のページを開く
  • ブラウザのアドレスバーからURLをコピーする
  • WordPressの編集画面で、動画を置きたい段落にペーストする
  • 数秒待つと、URLがYouTubeプレイヤーに変わる

クラシックエディタの場合も考え方は同じで、ビジュアルエディタ上にURLだけを1行で貼れば、WordPressが自動で埋め込みプレイヤーに変換してくれます。

このとき、URLの前後に日本語やスペース、余計な文字が混ざっていると、ただのリンクになってしまうことがあります。1行丸ごとURLだけになっているか、軽くチェックしておくとトラブルを減らせます。

埋め込みコードを使ってYouTube動画を挿入する方法

デザインをもう少しきれいに整えたいときや、サイズを微調整したいときは、YouTube側で発行できる埋め込みコードを使う方法が便利です。

YouTubeの動画ページで「共有」ボタンを押し、「埋め込む」を選ぶと、iframeタグから始まるコードが表示されます。そのコードをコピーして、WordPressの「カスタムHTML」ブロックにそのまま貼り付ければ、動画を表示できます。

コードの中には、widthとheightという数字が入っています。この数字を書き換えることで横幅や縦幅を変えられますが、極端に変えると画面が縦長になったり横に伸びたりして不自然になります。基本的には、横16:縦9くらいの比率を意識しておくと、見た目がいちばん安定します。

ショートコードで「wordpress youtube 埋め込み」を管理する方法

同じ動画をあちこちのページで何度も表示したい場合や、後からまとめて差し替えたい場合は、ショートコードを使うと管理が楽になります。

シンプルな例だと、記事の本文に

YouTubeのURL

のような形で書くパターンです。これを書いておくと、WordPressが自動的にYouTubeプレイヤーを表示してくれます。

テーマやプラグインによっては、独自のショートコードでサイズや位置を調整できるものもあります。自分の環境でどんなショートコードが使えるのか、一度マニュアルを覗いてみると「こんなこともできるのか」と発見があるはずです。

3つの埋め込み方法のざっくり比較

ここまで紹介した3つの方法を、「どんなときに向いているか」という視点でざっくり比べてみます。

方法 難易度 柔軟性 向いているケース
URLを貼るだけ とてもやさしい 低め とにかく素早く動画を入れたいとき、ブログを始めたばかりの人
埋め込みコード ふつう 高い サイズや余白を細かく調整したいとき、デザインを重視するサイト
ショートコード ふつう 中くらい 同じ動画を複数ページで使いたいとき、更新作業をシンプルにしたいとき

迷ったら、まずは「URLを貼るだけ」で感覚をつかみ、物足りなくなってきたら埋め込みコードやショートコードにステップアップする流れが、ストレスが少なくておすすめです。

目的別に見る「wordpress youtube 埋め込み」のおすすめパターン

ごとう
ごとう

同じWordPressとYouTubeの組み合わせでも、サイトの目的によって「ちょうどいい埋め込み方」は変わります。このパートでは、よくあるシチュエーションごとに、どの方法を選ぶと快適かを整理してみます。

ブログ記事でサクッと動画を見せたい場合

個人ブログやアフィリエイト記事など、テキストが主役のページにちょっとだけ動画を差し込みたいなら、URLを貼るだけの方法で十分です。作業が速く、ミスも起こりにくいので、最初の一歩にぴったりです。

私の場合、レビュー記事では、まず文章で特徴や注意点を整理して、そのあとに「実際に使っている様子はこの動画でどうぞ」といった感じでYouTube動画を1本差し込むことが多いです。

このとき、動画のすぐ下に、動画の内容をざっくりまとめたテキストを書いておくと、動画を見ない人にも内容が伝わりやすくなります。

ランディングページで訴求力を高めたい場合

商品やサービスのランディングページのように、「ここで申し込んでほしい」「お問い合わせしてほしい」といった明確なゴールがあるページでは、動画の見せ方がコンバージョン率に影響します。

こうしたページでは、埋め込みコードを使って、横幅いっぱいに大きく表示したり、上下の余白を調整したりと、デザインをきちんと作り込むのがおすすめです。

定番のパターンとしては、キャッチコピーやメイン画像のすぐ近くに動画を置き、その下にCTAボタンを配置するレイアウトがあります。今でもこの組み合わせは十分強力で、実際にCVが伸びたケースを何度も見ています。

サイト全体で同じ動画を繰り返し使いたい場合

 

 

 

【稼げるキーワード教えます】
▼  ▼  ▼
ba15a

 

 

 

会社紹介動画やサービス紹介動画を、トップページ、採用ページ、お問い合わせページなど、いろいろな場所に表示したいこともあると思います。

このような場合は、ショートコードで動画を呼び出す形にしておくと、後から差し替えが楽になります。ショートコードの中身だけ書き換えれば、設置しているページすべての動画を一度に変更できるからです。

更新のたびに各ページを開いて動画を入れ替えるのは、地味に手間がかかります。運用を続けるつもりなら、最初から「あとで楽をする設計」にしておくと、自分を助けることになります。

シチュエーション別のおすすめ埋め込み方法

ここまでの話を、よくあるシチュエーションごとに「どの方法がおすすめか」という視点で表に整理します。

シチュエーション おすすめの方法 ポイント
個人ブログの記事 URLを貼るだけ 作業が速く、操作もシンプルでミスしにくい
商品LPやサービスLP 埋め込みコード デザインを細かく調整しやすく、印象をコントロールしやすい
会社紹介動画を複数ページで表示 ショートコード 1か所の変更で、設置ページ全体の動画を差し替えられる
記事内で複数のYouTubeを並べたい 埋め込みコードまたはプラグイン 列レイアウトやギャラリー表示にしやすく、見た目を整えやすい

自分のサイトがどのタイプに近いかイメージしながら、最初の設定を決めてみてください。

YouTube埋め込みをカスタマイズしてWordPressサイトに最適化する

ごとう
ごとう

次は、YouTubeプレイヤーの動きや見た目をちょっとカスタマイズして、WordPressサイトに合わせて調整する方法を紹介します。難しいプログラミングではなく、「どんなことができるか」を知っておくだけでも、仕上がりが変わります。

自動再生・ミュート・ループなどの基本オプション

YouTubeの埋め込みURLには、少しだけ文字を追加することで再生の挙動を変えられる「パラメータ」が用意されています。よく使うものをまとめると、次のようなイメージです。

パラメータ 意味 使いどころ
autoplay=1 ページを開いたら自動で再生する メインビジュアルとして動画を使うときに検討。ただし音量に注意
mute=1 音をミュートした状態で再生を始める 自動再生と組み合わせて、静かな印象を保ちたいとき
loop=1&playlist=動画ID 同じ動画をループ再生する 短い紹介動画を繰り返し見せたいとき
controls=0 再生バーなどの操作ボタンを非表示にする 余計なボタンを減らして、内容に集中してほしいLPなどで検討
modestbranding=1 YouTubeロゴを控えめに表示する 自社ブランドを前面に出したいとき

これらは、埋め込みコードの中にある動画URLの末尾に「?」や「&」で付け足すイメージです。ただし、自動再生やミュートの挙動はブラウザやデバイスによって制限される場合もあるので、設定どおりに動かないこともあります。必ず実際の画面で動きを確認してから本番公開しましょう。

スマホでの見え方を意識したサイズ・縦横比の調整

最近は、サイトのアクセスの多くがスマホ経由というケースが珍しくありません。パソコンの画面だけで確認して「大丈夫そう」と思っていても、スマホで見ると横に飛び出してしまっている、ということもよくあります。

レスポンシブ対応のテーマやブロックエディタであれば、多くの場合は埋め込みプレイヤーも自動的に画面幅に合わせて伸び縮みしてくれます。まずはそのまま表示してみて、スマホで自然に収まっているかを確認してみてください。

もし横幅がはみ出してしまう場合は、テーマの設定や、動画を包んでいるコンテナの横幅指定が影響している可能性があります。テーマのマニュアルを確認しながら、「動画をレスポンシブにするためのおすすめ設定」がないか探してみると、ヒントが見つかることが多いです。

関連動画やタイトルバーをどう扱うか

YouTubeプレイヤーには、再生後に関連動画を表示する機能や、上部に動画タイトルが出る仕様があります。便利な一方で、「せっかく自分の動画を見てもらったのに、他のチャンネルに流れてしまった」というケースもあるあるです。

関連動画を完全に消すことは難しいものの、動画のタイトルや説明文、サムネイルをきちんと整えておくことで、自分のチャンネル動画が選ばれやすくなります。また、サイト上の説明文でも、動画の内容や見どころを書いておくと、「とりあえずもう1本見てみようかな」と思ってもらいやすくなります。

プラグインでWordPressとYouTubeの埋め込みをもっと便利にする

ごとう
ごとう

ここまでは、WordPressの標準機能とYouTube側の設定だけでできることを中心に紹介しました。このパートでは、「もう少し凝った見せ方をしたい」「表示速度も気になる」という人向けに、プラグインでできることのイメージをお伝えします。

YouTubeギャラリー系プラグインの活用イメージ

複数の動画をタイル状に並べて見せたり、チャンネルの動画一覧をそのままサイトに出したりしたい場合は、ギャラリー系のプラグインが役に立ちます。代表的なイメージを表にまとめると、次のような感じです。

プラグインのタイプ 主な機能 向いているサイト
YouTubeギャラリー系プラグインA チャンネルや再生リストをまとめて表示 YouTubeチャンネル運営がメインのメディアサイト
YouTubeギャラリー系プラグインB グリッド表示・スライダー表示に対応 デザイン性の高いポートフォリオサイト
軽量ギャラリープラグインC 最低限の機能に絞り、高速表示に配慮 表示速度を重視したブログやオウンドメディア

実際のプラグイン名や細かい機能はそれぞれ違いますが、「複数の動画をきれいに並べて見せる」「チャンネルや再生リストを自動で読み込む」といった部分は共通しています。デザインの好みや、求めている機能に合わせて選んでみてください。

読み込みを軽くする遅延読み込み系プラグイン

ページの中にYouTube動画をたくさん置くと、どうしても読み込みが重くなりがちです。そんなときに役立つのが、動画の読み込みを「あと回し」にする遅延読み込み系のプラグインです。

こうしたプラグインは、最初はYouTube本体ではなくサムネイル画像だけを表示しておき、ユーザーがスクロールして近づいたタイミングや、再生ボタンを押したタイミングで初めてYouTubeを読み込みます。

結果として、ページを開いたときの体感速度がかなり変わります。実際に、動画を10本以上並べていたページで遅延読み込みを導入したところ、「前より明らかにスムーズになった」と言われたことがあります。

プラグインに頼りすぎない設計も大事

プラグインは便利な反面、増えすぎると管理が大変になったり、アップデートのたびに不具合の原因になったりすることもあります。YouTubeの埋め込みについては、「まずは標準機能だけでどこまでできるか試してみて、本当に足りない部分だけプラグインで補う」という考え方が安全です。

私がクライアントのサイトを設計するときも、いきなり多くのプラグインを入れるのではなく、「これだけあれば今の運用に困らない」という最低限からスタートしてもらうようにしています。その方が、運用する人にとってもストレスが少ないと感じています。

「wordpress youtube 埋め込み」でよくあるトラブルと解決策

ごとう
ごとう

実際にWordPressにYouTube動画を入れてみると、「なぜか表示されない」「PCではきれいなのにスマホで崩れる」といったトラブルにぶつかることがあります。このパートでは、現場でよく見るつまずきポイントと、確認すべき順番をまとめます。

動画が表示されない・真っ白になるとき

一番よくあるのが、「URLを貼ったのに動画が出てこない」というケースです。そんなときは、まず次のポイントを順番にチェックしてみてください。

  • URLの前後に日本語や記号、スペースがくっついていないか
  • ショートコードの閉じタグ(例:[/embed])を入れ忘れていないか
  • 本来テキストエディタで貼るべきコードを、ビジュアルエディタに貼っていないか
  • キャッシュ系プラグインが古い状態のページを見せていないか

また、YouTube側の設定で「特定のサイト以外では再生しない」などの制限がかかっている場合もあります。別のサイトやスマホなどから同じ動画を再生してみて、問題なく見られるかどうかも確認してみましょう。

レイアウトが崩れる・スマホで横スクロールが出るとき

埋め込みコードを使ってサイズ指定をしていると、テーマとの相性によっては横幅がはみ出してしまい、スマホで横スクロールが出ることがあります。そんなときは、次のような切り分け方をしていくと原因を見つけやすいです。

症状 考えられる原因 対処の方向性
PCでは問題ないがスマホで横スクロールが出る 動画の横幅が固定ピクセルで指定されている 幅を%指定に変えるか、最大幅の上限を設定する
テーマを変えたら急に崩れた 新しいテーマのスタイルが強く当たっている テーマのマニュアルを確認し、推奨されている埋め込み方法に合わせる
複数の動画を横に並べたらガタガタになった カラム幅に対して動画サイズが大きすぎる カラムごとの幅に合わせて動画サイズを小さくする

ひとつずつ条件を変えながら確認していくと、「どこが悪さをしているのか」が見えてきます。

再生されない・エラーが出るとき

プレイヤー自体は表示されているのに、再生ボタンを押すとエラーが出るケースもあります。この場合は、YouTube側の一時的な不具合や、ネットワークの制限が影響している可能性もあります。

特に社内ネットワークではYouTubeへのアクセスが制限されていることが多く、その環境ではWordPressに埋め込んだ動画も同じように再生できません。スマホ回線や自宅のWi-Fiなど、別の回線から同じページを開いてみて、再生できるかどうかを確認すると切り分けやすくなります。

wordpress youtube 埋め込みとSEO・表示速度・アクセシビリティの考え方

ごとう
ごとう

YouTube動画をWordPressに埋め込むときは、見た目だけでなく、SEOや表示速度、アクセシビリティのことも少し意識しておくと安心です。このパートでは、それぞれの観点から最低限押さえておきたいポイントを紹介します。

SEO的に意識しておきたいポイント

まず覚えておきたいのは、「動画を貼っただけでは記事の評価は決まらない」ということです。検索エンジンは、動画そのものよりも、ページ内のテキスト情報を主な判断材料にしています。

そのため、動画に説明を丸投げするのではなく、動画で話している内容を要約したり、重要なポイントを箇条書きにしたりして、テキストでもしっかり伝えることが大事です。動画の近くにテーマに関連するキーワードを自然な形で散りばめておけば、ページ全体としての理解度も上がりやすくなります。

表示速度を落とさないための工夫

YouTubeプレイヤーは便利ですが、読み込むためのスクリプトや画像が多く、ページ表示を重くしがちです。特に、1ページに多くの動画を埋め込むときは注意が必要です。

表示速度をできるだけ落とさないために、次のような工夫を検討してみてください。

  • 1ページあたりの埋め込み動画の本数をしぼる
  • サムネイル画像と再生ボタンだけを先に表示し、クリックされたらYouTube本体を読み込む仕組みにする
  • 必要に応じて遅延読み込み系プラグインを導入する

とくに、動画が多いページで遅延読み込みを使うと、スクロールしたときの重さがかなり変わります。実際にサイトを運営している人からも、「動画を増やしたのに前より軽く感じる」という声を聞くことがあります。

アクセシビリティとユーザー体験の視点

アクセシビリティの観点では、「重要な情報を動画だけに閉じ込めない」ことがポイントです。音声が聞き取りづらい人や、そもそも音を出せない環境で見ている人もいるので、大事な説明はテキストでも補うようにしておきましょう。

また、動画に字幕を付けておくと、通勤中など音を出せない状況でも内容が伝わりやすくなります。いきなり完璧な字幕を用意するのは大変ですが、要点だけでもテロップとして入れておくと、ユーザー体験がかなり変わります。

まとめ:「wordpress youtube 埋め込み」で今日からできる一歩

ここまで、WordPressでYouTube動画を埋め込む基本のやり方から、目的別の使い分け、トラブル対策、SEOや表示速度の考え方まで、一通りお話ししてきました。最後に、要点をコンパクトにまとめます。

  • 最初は「URLを貼るだけ」の方法から始めて、慣れてきたら埋め込みコードやショートコードにステップアップする
  • ランディングページなどでは、埋め込みコードでサイズや余白を調整し、見せ方をきちんとデザインする
  • 動画の近くには、内容を要約したテキストやポイントの箇条書きを置き、テキストだけでも理解できるようにしておく
  • 動画が多いページでは、遅延読み込みや本数の調整などで、表示速度にも気を配る
  • トラブルが起きたときは「URLの書き方」「テーマやプラグインの影響」「ネットワーク環境」の順に確認する

今日からできる一歩としては、まず1本、自分のサイトに合いそうなYouTube動画を選んで、この記事を見ながら実際にWordPressに埋め込んでみてください。

一度やってみると、「ここはもう少し大きく見せたい」「スマホでの見え方も調整したい」といった次の課題が自然と見えてきます。そのときに、この記事の中から必要な部分だけをもう一度読み返して、少しずつチューニングしていけば大丈夫です。あなたのサイトとYouTube動画の相性を、一緒に育てていきましょう。

 

 

記事を読んだらコチラ
▼  ▼  ▼
ba15a