WordPressにYouTube動画を埋め込む方法と実践テクニック完全ガイド

WordPressで記事を書いていると、「ここにYouTube動画を入れたい」と思う場面は意外と多いものです。テキストだけでは伝わりにくい操作手順や、雰囲気を伝えたいレビュー記事など、動画があるだけで読者の理解度はまったく変わってきます。

個人的な経験では、ブログ記事にYouTube動画を埋め込むようになってから、ページの平均滞在時間が目に見えて伸びました。ただ、最初は「URLを貼ったのに動画が表示されない」「サイズが崩れる」といったトラブルに何度も悩まされたのも事実です。

この記事では、WordPressにYouTube動画を埋め込むすべての方法を、初心者の方でも迷わず実践できるように丁寧に解説していきます。

WordPressにYouTubeを埋め込む3つの基本方法

WordPressにYouTube動画を埋め込む方法は、大きく分けて3つあります。それぞれ難易度と自由度が異なるので、目的に合わせて選ぶのがポイントです。

まずは最もシンプルな方法から順番に見ていきましょう。

方法1 URLを貼り付けるだけの自動埋め込み（oEmbed）

WordPressにはoEmbed（オーエンベッド）という仕組みが標準で備わっています。簡単に言えば、YouTubeのURLを本文に貼り付けるだけで、自動的に動画プレーヤーに変換してくれる機能です。

手順はとてもシンプルです。

まず、埋め込みたいYouTube動画のページを開き、ブラウザのアドレスバーからURLをコピーします。次に、WordPressの投稿編集画面を開き、動画を表示したい場所にカーソルを置いて、そのままURLを貼り付けます。

たったこれだけです。

ブロックエディタ（Gutenberg）を使っている場合、URLを貼り付けると自動的に「YouTube」ブロックとして認識され、編集画面上でもプレビューが表示されます。

注意点として、URLは必ず独立した行に単体で貼り付けてください。文章の途中にURLを入れると、リンクテキストとして表示されるだけで動画プレーヤーにはなりません。

対応するURLの形式は以下のとおりです。

方法2 埋め込みコード（iframe）を使う方法

もう少し細かくコントロールしたい場合は、YouTubeが提供する埋め込みコードを使います。

YouTube動画のページで「共有」ボタンをクリックし、次に「埋め込む」を選択すると、<iframe>タグで構成された埋め込みコードが表示されます。このコードをコピーして、WordPressの投稿編集画面に貼り付けます。

ブロックエディタの場合は、「カスタムHTML」ブロックを追加してからコードを貼り付けてください。ビジュアルエディタに直接貼り付けると、コードが正しく認識されないことがあります。

クラシックエディタを使っている方は、必ず「テキスト」タブに切り替えてからiframeコードを貼り付けてください。「ビジュアル」タブのまま貼り付けると、コードがそのまま文字列として表示されてしまいます。

この方法の大きなメリットは、パラメータを追加して動画の挙動をカスタマイズできる点です。

方法3 プラグインを使った埋め込み

複数の動画を一括管理したい場合や、ギャラリー形式で表示したい場合は、専用プラグインの導入を検討する価値があります。

代表的なプラグインとしては、Embed Plus for YouTubeやWP YouTube Lyteなどがあります。これらのプラグインを使うと、動画の遅延読み込み（Lazy Load）やカスタムプレーヤーデザイン、再生リストの一括埋め込みといった機能が追加されます。

ただし、個人的な経験では、単に動画を埋め込むだけならプラグインは不要です。プラグインを増やすほどサイトの管理が複雑になり、アップデート時の不具合リスクも高まります。まずはURL貼り付けやiframeコードで対応し、本当に必要になったときにプラグインを検討する、という順番がおすすめです。

埋め込みコードのカスタマイズパラメータ

iframeを使った埋め込みでは、URLの末尾にパラメータを追加することで、動画の表示や再生方法を細かく制御できます。

これまでの取り組みの中で実際によく使うパラメータを、用途別にまとめました。

再生に関するパラメータ

動画の再生動作を制御するパラメータは、読者の体験に直結する重要な設定です。

autoplay=1は、ページを開いた瞬間に動画を自動再生させます。ただし、最近のブラウザではユーザー操作なしの自動再生がブロックされることが多いため、mute=1（ミュート）と組み合わせないと動作しないケースがほとんどです。個人的にはブログ記事での自動再生は読者にとって不快になりやすいため、あまりおすすめしていません。

start=秒数を使うと、動画の途中から再生を開始できます。たとえばstart=90と指定すれば、1分30秒の位置から再生されます。長い動画の特定の部分だけを見せたいときに非常に便利です。

end=秒数は再生の終了位置を指定します。startと組み合わせることで、動画の一部分だけを切り出して見せることができます。

loop=1は動画をループ再生させます。BGM的に使いたい場面や、短いデモ動画を繰り返し見せたい場合に活用できます。

表示に関するパラメータ

controls=0を指定すると、再生バーやボリュームなどのコントロールUIが非表示になります。デザイン重視のページで使われることがありますが、ユーザビリティの観点からは基本的にコントロールを表示しておくことをおすすめします。

rel=0は、動画の再生終了後に表示される関連動画を、同じチャンネルの動画に限定します。以前は関連動画を完全に非表示にできましたが、現在のYouTubeの仕様では完全な非表示はできなくなっています。

modestbranding=1を指定すると、プレーヤー上のYouTubeロゴが控えめな表示になります。企業サイトやブランドイメージを重視するページでよく使われるパラメータです。

パラメータの組み合わせ例

実際の埋め込みコードでは、複数のパラメータを&で繋げて使います。

たとえば、90秒から再生を開始し、関連動画を制限し、ロゴを控えめにする場合は次のようになります。

レスポンシブ対応でスマホでも崩れない埋め込み方法

YouTube動画を埋め込んだとき、パソコンでは問題なく表示されるのに、スマートフォンで見ると動画がはみ出してしまう。これは非常によくあるトラブルです。

原因は、iframeのwidthとheightが固定値（ピクセル）で指定されているためです。画面幅が狭いスマートフォンでは、560pxの幅がそのまま適用されてしまい、画面からはみ出します。

CSSで対応するレスポンシブ埋め込み

最も確実な方法は、動画を囲むラッパー要素にCSSを適用するやり方です。

ここでのpadding-bottom: 56.25%は、16:9のアスペクト比を維持するための計算値です（9÷16×100=56.25）。この指定により、画面幅が変わっても動画の縦横比が崩れることなく、きれいにリサイズされます。

ブロックエディタなら自動対応される場合も

WordPress 5.0以降のブロックエディタ（Gutenberg）を使っている場合、URLを貼り付けて生成されるYouTubeブロックは、多くのテーマでレスポンシブに対応しています。

ただし、これはテーマ側のCSS実装に依存します。すべてのテーマで完璧に対応しているわけではないので、実際にスマートフォンで表示を確認することが大切です。

WordPressテーマの選び方でも触れていますが、テーマによってYouTube埋め込みの表示品質にはかなり差があります。SWELLのような国産テーマは、日本語コンテンツとの相性が良く、YouTube埋め込みのレスポンシブ対応もしっかりしている印象です。

ページ表示速度への影響と対策

YouTube動画の埋め込みは、ページの表示速度に大きな影響を与えます。

1つの動画を埋め込むだけで、YouTubeのプレーヤースクリプトやサムネイル画像など、複数のリソースが追加で読み込まれます。これまでの取り組みで実際に計測してみたところ、YouTube動画を1つ埋め込むだけでページの読み込み時間が0.5〜1.5秒ほど増加するケースがありました。

複数の動画を1ページに埋め込む場合、その影響はさらに大きくなります。

遅延読み込み（Lazy Load）で速度を改善する

最も効果的な対策は、遅延読み込み（Lazy Load）です。これは、ユーザーが動画の位置までスクロールしたときに初めてiframeを読み込む仕組みです。

WordPress 5.7以降では、iframeにloading="lazy"属性を追加するだけで基本的な遅延読み込みが実現できます。

サムネイル置換テクニック

さらに高度な方法として、動画プレーヤーの代わりにサムネイル画像を最初に表示し、クリックされたときだけiframeを読み込むテクニックがあります。

この方法を使えば、ページの初期読み込みではYouTubeのスクリプトがまったく読み込まれないため、表示速度への影響をほぼゼロにできます。WP YouTube Lyteなどのプラグインがこの機能を提供していますし、JavaScriptを書ける方なら自前で実装することも可能です。

よくあるトラブルと解決方法

YouTube動画の埋め込みで遭遇しやすいトラブルを、原因と解決策とともにまとめました。

URLを貼り付けても動画が表示されない

最も多いトラブルです。原因はいくつか考えられます。

まず確認すべきは、URLが独立した行に貼り付けられているかどうかです。テキストの途中にURLがあると、WordPress は oEmbed として認識しません。

次に、URLの形式を確認してください。短縮URL（youtu.be）や標準URL（youtube.com/watch?v=）は対応していますが、YouTube Musicなど別サービスのURLは自動変換されません。

また、WordPressのバージョンが古い場合や、テーマやプラグインがoEmbed機能を無効化しているケースもあります。プラグインを一時的にすべて無効化して確認するのが、原因の切り分けに有効です。

動画が表示されるがサイズがおかしい

前述のレスポンシブ対応が行われていない場合に起きます。CSSラッパーを使った対応を試してください。

また、テーマのCSSがiframeに対してmax-widthを設定している場合、想定より小さく表示されることがあります。ブラウザの開発者ツールでiframe要素を検証すると、どのCSSが影響しているか特定できます。

「この動画は埋め込みが無効です」と表示される

これはWordPress側の問題ではなく、動画のアップロード者が埋め込みを許可していないケースです。残念ながら、この場合は埋め込みではなくリンクとして動画を紹介するしかありません。

HTTPS混在コンテンツの警告が出る

サイトがHTTPSで運用されているのに、埋め込みコードのURLがhttp://で始まっている場合、ブラウザが混在コンテンツとして警告を出すことがあります。埋め込みURLがhttps://www.youtube.com/embed/で始まっていることを確認してください。

ブロックエディタとクラシックエディタでの操作の違い

WordPressの編集エディタによって、YouTube埋め込みの操作方法が若干異なります。

ブロックエディタ（Gutenberg）の場合

ブロックエディタでは、YouTube動画を埋め込む方法が複数用意されています。

最も簡単なのは、本文エリアにYouTubeのURLをそのまま貼り付ける方法です。自動的に「YouTube」ブロックに変換され、エディタ上でプレビューも確認できます。

もう一つの方法は、ブロック追加ボタン（+）から「YouTube」ブロックを選択し、URL入力欄にアドレスを入力する方法です。結果は同じですが、こちらの方が意図的に配置している感覚があります。

iframeコードを使いたい場合は、「カスタムHTML」ブロックを追加してコードを貼り付けます。「プレビュー」ボタンで表示を確認できるのが便利です。

クラシックエディタの場合

クラシックエディタでURL貼り付けによる自動埋め込みを使う場合は、「ビジュアル」タブでそのままURLを貼り付けます。

iframeコードを使う場合は、必ず「テキスト」タブに切り替えてからコードを貼り付けてください。「ビジュアル」タブではHTMLコードがフィルタリングされ、正しく動作しないことがあります。

WordPressの始め方でも解説していますが、これからWordPressを始める方にはブロックエディタの利用をおすすめします。YouTube埋め込みに限らず、あらゆるコンテンツの配置が直感的に行えます。

著作権とYouTube埋め込みの注意点

YouTube動画の埋め込みは、YouTube自体が提供している機能であり、基本的には利用規約の範囲内で問題ありません。ただし、いくつか知っておくべきポイントがあります。

YouTubeの埋め込み機能を使って他者の動画を自分のサイトに表示すること自体は、YouTubeの利用規約で認められた行為です。動画をダウンロードして再アップロードするのとは根本的に異なります。

ただし、埋め込みが許可されていない動画を技術的な手段で無理やり埋め込むことは規約違反になります。また、動画の内容を自分のオリジナルコンテンツであるかのように見せる行為も問題です。

ブログ記事で動画を埋め込む際は、動画の出典を明記し、自分のコンテンツと動画コンテンツの区別が明確になるようにしておくのが良い習慣です。

SEO観点から見たYouTube埋め込みの効果

YouTube動画の埋め込みは、SEOの観点からもいくつかのメリットがあります。

まず、ページ滞在時間の向上です。動画を視聴するためにユーザーがページに留まる時間が長くなり、これが間接的にSEO評価にプラスの影響を与えると考えられています。

次に、コンテンツの充実度です。テキストだけでなく動画も含むリッチなコンテンツは、ユーザーの多様なニーズに応えられるため、検索エンジンからの評価が高まる傾向があります。

一方で注意すべき点もあります。

動画の読み込みによるページ速度の低下は、Core Web Vitalsのスコアに悪影響を及ぼす可能性があります。前述の遅延読み込みやサムネイル置換テクニックを活用して、速度への影響を最小限に抑えることが重要です。

また、動画だけに頼ってテキストコンテンツが薄くなると、逆効果になることもあります。動画はあくまでテキストコンテンツを補完する要素として位置づけ、記事本文の充実を怠らないようにしましょう。ブログ収入の仕組みを理解している方ならご存知かと思いますが、検索エンジンはテキストコンテンツを主な評価対象としています。

実践的なTipsとベストプラクティス

最後に、WordPressでYouTube動画を埋め込む際に知っておくと役立つ実践的なポイントをまとめます。

1ページに埋め込む動画数の目安

経験上、1ページに埋め込む動画は3本以内に抑えるのがベストです。それ以上になると、ページの読み込み速度が著しく低下するだけでなく、読者にとっても情報過多になりがちです。

どうしても多くの動画を紹介したい場合は、テキストリンクで動画ページに誘導するか、サムネイル画像にリンクを設定する方法を検討してください。

動画の配置位置を意識する

動画は記事の冒頭に置くよりも、テキストで文脈を説明した後に配置する方が効果的です。読者が「なぜこの動画を見る必要があるのか」を理解してから動画に出会うことで、実際に再生される確率が高まります。

プレーヤーサイズの最適値

ブログ記事の本文幅に合わせたサイズ設定が理想的です。一般的なブログのコンテンツ幅は680〜780px程度なので、横幅を100%に設定し、アスペクト比16:9を維持するレスポンシブ対応が最も無難です。

定期的なリンクチェック

埋め込んだ動画が削除されたり非公開になったりすると、記事上に空白やエラーが表示されます。定期的に過去記事をチェックし、動画が正常に表示されているか確認する習慣をつけましょう。WordPressカスタマイズの一環として、リンク切れチェックプラグインを導入しておくのも有効です。

よくある質問（FAQ）

WordPressの無料プランでもYouTube動画を埋め込めますか

WordPress.com（無料プラン）でもYouTube動画のURL貼り付けによる埋め込みは可能です。ただし、iframeコードやカスタムHTMLの使用は有料プラン以上で対応しています。自分でサーバーを用意してインストールするWordPress.org（自己ホスティング版）であれば、すべての埋め込み方法が制限なく使えます。

埋め込んだ動画が再生できないときの対処法は

まず、その動画がYouTube上で正常に再生できるか確認してください。動画自体が削除・非公開になっている場合はWordPress側では対処できません。動画が正常なのに埋め込みが表示されない場合は、キャッシュプラグインのキャッシュをクリアする、ブラウザのキャッシュを削除する、プラグインの競合を確認する、という順番で対処していくのが効率的です。

YouTube以外の動画サービスも同じ方法で埋め込めますか

WordPressのoEmbed機能は、YouTube以外にもVimeo、Dailymotion、TikTokなど多くの動画サービスに対応しています。対応サービスの一覧はWordPress公式ドキュメントで確認できます。ただし、サービスごとにカスタマイズ可能なパラメータは異なるため、詳細は各サービスのドキュメントを参照してください。

動画のサムネイル画像だけを表示してクリックで再生させることはできますか

はい、可能です。前述のサムネイル置換テクニックを使えば実現できます。YouTubeの動画サムネイルはhttps://img.youtube.com/vi/動画ID/maxresdefault.jpgというURLで取得できるので、この画像をリンクとして配置し、JavaScriptでクリック時にiframeに差し替える仕組みを作ります。プラグインを使えばコードを書かずに同じことが実現できます。

埋め込み動画の周りに余白やボーダーを追加するにはどうすればよいですか

iframeを囲む<div>要素にCSSでスタイルを適用するのが最もシンプルな方法です。たとえばpaddingで余白を、borderでボーダーを、border-radiusで角丸を追加できます。ブロックエディタの場合は、YouTubeブロックを「グループ」ブロックで囲み、グループに対してスタイルを設定することもできます。

まとめ

WordPressにYouTube動画を埋め込む方法は、URL貼り付け、iframeコード、プラグインの3つが基本です。ほとんどの場合、URLを貼り付けるだけのシンプルな方法で十分対応できます。

カスタマイズが必要な場合はiframeコードにパラメータを追加し、レスポンシブ対応のCSSラッパーで囲むことで、どのデバイスでもきれいに表示されます。

ページ速度への影響を意識し、遅延読み込みを設定しておくことも忘れないでください。

動画はブログ記事の価値を大きく高めてくれる要素です。正しい方法で埋め込み、読者にとって快適な閲覧体験を提供していきましょう。