WordPressへの動画埋め込みに挑戦したいものの、「どの方法を選べばいいのか」「うまく表示されるか不安」と感じている方も多いのではないでしょうか。
動画コンテンツはページの滞在時間を伸ばし、内容をより伝わりやすくする効果も期待できます。
本記事では、直接アップロードとYouTube経由の違いから、サイズ変更・自動再生などのカスタマイズ方法、表示トラブルの対処法、著作権の注意点まで網羅しています。
WordPressに動画を埋め込む方法を把握したい方は、ぜひ最後までお読みください。
WordPressへ動画を埋め込む2つの方法
WordPressに動画を埋め込む方法は、大きく分けると以下の2つです。
- 動画を直接アップロードする
- YouTube動画を埋め込む
本章では、それぞれの特徴と、用途に応じて使い分ける方法を解説します。
動画を直接アップロードする
WordPressに動画を直接アップロードする方法は、外部サービスに依存せず動画を表示できる点がメリットです。
ただし、サーバーへの負荷が大きくなるため、用途を限定して使う方法がおすすめです。
直接アップロードすると、動画ファイルがそのままサーバーに保存されます。
そのため、大容量のファイルをアップロードするほどサーバーの容量が減り、ページの読み込みに時間がかかりやすくなります。数分の動画であっても、ファイルサイズが数百MBを超えるケースは珍しくありません。
この方法が向いているのは、外部に公開したくない社内向けの動画や、短尺で容量が小さいファイルを扱う場面です。
一方で、公開用のコンテンツや長尺動画の場合は、後述するYouTubeの埋め込みを選ぶほうがサーバーへの影響を抑えられます。直接アップロードを選ぶ際は、ファイルサイズを事前に圧縮しておくことが重要です。
YouTube動画を埋め込む
WordPressにYouTube動画を埋め込む方法は、サーバーに負荷をかけずに動画コンテンツを表示できるもっとも手軽な手段です。
YouTubeを経由して埋め込む場合、動画データはYouTubeのサーバーで管理されるため、自分のサーバー容量を消費せず、ページの表示速度への影響も最小限に抑えられます。
また、YouTubeには再生回数の計測機能が備わっているため、動画がどれだけ視聴されているかを手軽に把握できます。
さらに、自分でアップロードした動画であればYouTube側で著作権管理や削除対応が一元化されるため、管理の手間を減らすことが可能です。
記事に動画を添えてコンテンツを充実させたい場合や、視聴数を伸ばしながらサイトへの流入も増やしたい場合に、特に適した方法です。
WordPressにmp4動画を直接埋め込む方法
WordPressに動画を直接埋め込む際は、ファイル形式の確認が最初のステップです。形式を整えてからメディアライブラリへアップロードすることで、スムーズに記事へ挿入できます。
本章では、mp4動画を直接埋め込む方法を解説します。
動画ファイルをmp4形式に変換する
WordPressの記事に動画を直接埋め込む場合、ファイルはmp4形式で用意する必要があります。
iPhoneで撮影した動画はmov形式で保存されることが多く、そのままではWordPressの記事に埋め込めません。そのため、事前にmp4形式へ変換しておく必要があります。
変換には、無料で使えるHandBrakeやCloudConvertといったツールが便利です。どちらもファイルをソフトに読み込み、出力形式をmp4に指定するだけで変換できます。
mp4はWordPressが標準で対応しているファイル形式であり、多くのブラウザでも問題なく再生されます。
撮影した動画を記事に載せたい場合は、まずファイル形式を確認することから始めましょう。
メディアライブラリへアップロードする
mp4ファイルを用意できたら、WordPressのメディアライブラリにアップロードして記事に挿入します。
操作手順は以下のとおりです。
- 管理画面の左メニューから「メディア」を選択
- 「新しいメディアファイルを追加」を選択
- アップロードしたいmp4ファイルをドラッグ＆ドロップ、または「ファイルを選択」から指定する
- アップロード完了後、記事の編集画面を開く
- ブロック追加ボタン（＋）から「動画」ブロックを挿入
- メディアライブラリから該当ファイルを選択する
上記の手順で、記事内に動画を表示できます。
アップロードできるファイルの上限サイズはサーバーの設定によって異なるため、容量が大きいファイルは事前に圧縮しておくと安心です。
WordPressにYouTube動画を埋め込む3つの方法
WordPressにYouTube動画を埋め込む方法は、手軽さや設定の自由度によって分かれます。
本章では、YouTube動画の埋め込み方を3つ紹介します。それぞれの操作手順と特徴を把握し、目的に合った方法を選びましょう。
URLをそのまま貼り付けて埋め込む
WordPressの記事にYouTubeのURLを貼り付けるだけで、動画を自動的に埋め込めるもっとも手軽な方法です。
WordPressにはoEmbedという仕組みが備わっており、対応したURLを貼り付けると自動的に動画プレーヤーとして表示されます。操作手順は以下のとおりです。
- YouTubeで埋め込みたい動画を開き、ブラウザのアドレスバーからURLをコピー
- WordPressの記事編集画面を開き、段落ブロックにURLをそのまま貼り付ける
- Enterキーを押すと、動画プレーヤーとして表示される
コードの知識は一切不要で、慣れていない方でもすぐに実践できます。
ただし、上記の方法ではサイズの細かい調整がしにくいため、表示の自由度を高めたい場合は後述の方法を検討してください。
YouTubeブロックを使って埋め込む
ブロックエディターのYouTubeブロックを使うと、URLの貼り付けよりも直感的に動画を埋め込めます。
操作手順は以下のとおりです。
- 記事編集画面でブロック追加ボタン（＋）をクリックする
- 検索欄に「YouTube」と入力し、YouTubeブロックを選択する
- 表示されたURL入力欄に動画のURLを貼り付ける
- 埋め込みボタンをクリックする
ブロック選択後はサイドバーから配置の調整もしやすく、初めて動画を埋め込む方にも扱いやすい方法です。
URLをそのまま貼るよりも設定項目が視覚的に確認できるため、操作に迷いにくい点がメリットです。
埋め込みコード（iframe）を取得して貼り付ける
YouTube側で発行される埋め込みコードを使う方法は、動画のサイズ変更や詳細な再生設定をしたい場合にもっとも適しています。
iframeとは、Webページの中に別のコンテンツを表示するためのHTMLの記述方法です。YouTubeの埋め込みコードもこの形式で提供されています。操作手順は以下のとおりです。
- YouTubeで対象の動画を開き、動画下部の「共有」をクリック
- 表示されたメニューから「埋め込む」を選択し、コードをコピー
- WordPressの編集画面でカスタムHTMLブロックを追加し、コードを貼り付け
上記の方法ではコード内のwidthやheightの数値を書き換えることで表示サイズを自由に指定できます。
自動再生やループ再生なども設定できるため、見た目や動作にこだわりたい場合に活用してください。
埋め込んだ動画のカスタマイズ方法
動画を埋め込んだ後は、サイズや再生設定を調整することでページの見た目や使い勝手を高められます。
本章では、埋め込んだ動画のカスタマイズ方法を解説します。直接アップロードとYouTube埋め込みでは操作方法が異なるため、それぞれの手順を確認しましょう。
動画ブロックでサイズを調整する
直接アップロードした動画のサイズは、ブロック設定パネルから変更できます。
動画ブロックを選択すると、画面右側にブロック設定パネルが表示されます。パネル内の「寸法」項目から幅と高さを数値で入力するだけでサイズの調整が可能です。
コードを触る必要がないため、初心者でも迷わず操作できます。
また、編集画面上で動画の端をドラッグしてサイズを変更することも可能です。視覚的に確認しながら調整できるため、仕上がりイメージを掴みやすい方法です。
ページのレイアウトに合わせて見た目を整えたい場合に活用してください。
YouTube動画のサイズをコードで指定する
YouTubeの埋め込みコード（iframe）内の数値を書き換えることで、表示サイズを自由に指定できます。
iframeコードには以下のようにwidthとheightという属性が含まれており、任意の数値を入力することでサイズの変更が可能です。
- <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/〇〇” …></iframe>
ただし、数値を固定すると画面幅が狭いスマートフォンで表示が崩れる場合があります。
その際はCSSに以下のように記述することで、画面サイズに応じて自動調整されるレスポンシブ対応が可能です。
- iframe { width: 100%; aspect-ratio: 16/9; }
スマートフォンからの閲覧が多いサイトでは、固定サイズではなくレスポンシブ対応を優先することをおすすめします。
自動再生・ループ・ミュートを設定する
自動再生・ループ・ミュートの設定方法は、直接アップロードした動画とYouTube埋め込みで異なります。
直接アップロードした動画の場合、ブロック設定パネルから各項目をオン・オフで切り替えられます。自動再生・ループ・ミュートそれぞれにトグルスイッチが用意されており、クリックするだけで設定が可能です。
YouTube埋め込みの場合は、iframeコードのsrc（動画のURL部分）末尾にパラメータを追加することで設定します。主なパラメータは以下のとおりです。
| 設定項目 | パラメータ |
|---|---|
| 自動再生 | autoplay=1 |
| ループ再生 | loop=1&playlist=動画ID |
| ミュート | mute=1 |
複数の設定を同時に適用する場合は、パラメータを「&」でつなげて記述します。
なお、多くのブラウザでは自動再生はミュート状態でないと機能しない仕様になっているため、autoplayとmuteはセットで設定してください。
WordPress動画埋め込みに役立つおすすめプラグイン
本章では、WordPressに動画を埋め込む際に、標準機能だけでは対応しにくい用途を補うプラグインを2つ紹介します。
表示速度の改善やサイドバーへの動画設置など、目的に応じて活用してください。
WP YouTube Lyte
WP YouTube Lyteは、YouTube動画の埋め込みによるページ表示速度の低下を防ぐプラグインです。
通常、YouTube動画を埋め込むとページを開いた瞬間から動画の読み込みが始まるため、表示速度が遅くなります。
WP YouTube Lyteは、遅延読み込み（ユーザーが動画をクリックするまで読み込みを行わない仕組み）を自動で適用することで、表示速度の遅延を解消します。
設定方法はシンプルで、プラグインをインストールして有効化するだけです。特別な設定変更をしなくても、既存の埋め込み動画に自動で適用されます。
動画を複数ページに埋め込んでいるサイトや、表示速度の改善を手軽に行いたい場合に特に効果的なプラグインです。
Widget Responsive for Youtube
Widget Responsive for Youtubeは、サイドバーにYouTube動画を設置できるプラグインです。
通常の記事内への埋め込みとは異なり、このプラグインを使うとサイトのサイドバー（画面の横に常時表示されるエリア）に動画を配置できます。
ショートコード（決まった書式で記述する短い命令文）を使って動画を指定するため、HTMLの知識がなくても設定できます。
自社のYouTubeチャンネルをアピールしたい場合や、注目してほしい動画をすべてのページで目立たせたい場合に有効です。記事ごとに動画を埋め込む手間をかけずに、サイト全体で動画を露出できる点がメリットです。
以下の記事では、その他の便利なプラグインを紹介しています。より高度なサイト運営を目指したい方はぜひ参考にしてください。
なぜWordPressプラグインが重要なのか？WordPressの可能性を最大限に引き出すためには、プラグインの活用が不可欠です。プラグインは、WordPressに様々な機能を追加し、サイトのSEO、セキュリティ強化、表示速度改善[…]
動画の埋め込みで表示が崩れるときの原因と対処法
WordPressに埋め込んだ動画が表示されない・サイズが崩れるといったトラブルは、原因を把握すれば多くの場合すぐに解決できます。本章では、よくある原因と対処法を解説します。
YouTubeの埋め込みが表示されないときに確認すること
YouTubeの埋め込み動画が表示されない場合、まずURL形式・プライバシー設定・キャッシュの3点を確認してください。
確認すべきポイントは以下のとおりです。
| 原因 | 確認・対処方法 |
|---|---|
| URL形式の誤り | 貼り付けたURLが通常の視聴用URL（youtube.com/watch?v=〇〇）になっているか |
| プライバシー設定 | YouTube側で動画が非公開または限定公開になっていないか |
| キャッシュの影響 | ブラウザのキャッシュ（一時保存データ）をクリアしてから再読み込みする |
上記を確認しても改善しない場合は、WordPressのプラグインが埋め込みの処理に干渉している可能性があります。
プラグインを一時的に無効化して、動画が表示されるか確認しましょう。
動画のサイズが崩れるときのCSSでの修正方法
動画のサイズ崩れは、CSSを追加することで修正できます。
スマートフォンなど画面幅が狭い端末で動画が見切れたり、横にはみ出したりする場合、埋め込みコードのサイズが固定値で指定されていることが原因です。
この場合、CSSで以下のように記述すると、画面幅に応じて自動でサイズが調整されます。
.wp-block-embed__wrapper {
position: relative;
padding-top: 56.25%;
}
.wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}上記のCSSは、WordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」に貼り付けるだけで適用が可能です。
以下の記事では、CSSの具体的な編集方法を解説しています。WordPressでCSSを編集することが初めての方はぜひ参考にしてください。
「WordPress（ワードプレス）でCSSはどこに書くのかわからない」「編集しても反映されない原因がつかめない」と悩む方もいるでしょう。CSSは複数の場所に記述できるため、正しい方法を理解していないと表示崩れや反映されない問題が[…]
WordPressに動画を埋め込む際の注意点
動画の埋め込みは手軽にコンテンツを充実させられる反面、著作権やページ速度への影響を見落としがちです。
本章では、動画を埋め込む際の注意点を解説します。トラブルを防ぐために、事前に把握しておくべき点を確認しましょう。
著作権の確認が必要なケースを把握しておく
自分ではない第三者のYouTube動画をサイトに埋め込む行為は、YouTubeの利用規約上は原則として認められています。ただし、すべてのケースで問題ないわけではありません。
動画の投稿者が埋め込みを無効化している場合は、その意思を尊重して使用を控えるべきです。
また、音楽や映像に第三者の著作物が含まれている動画を埋め込むと、権利者からクレームが入る可能性があります。
特に注意が必要なのは、テレビ番組や市販の音楽を無断で使用した動画です。埋め込む前に、動画の内容と権利関係を確認する習慣をつけておきましょう。
動画の貼り過ぎによるページ速度低下を防ぐ
1つのページに動画を複数埋め込むと、ページの読み込み速度が低下する原因になります。
YouTube動画を埋め込んだ場合でも、ページを開いた時点で関連するファイルの読み込みが始まるため、動画の数が増えるほど表示速度への影響が大きくなります。対策として有効な方法は以下の2つです。
- 遅延読み込みプラグインを導入して、クリック時まで読み込みを遅らせる
- YouTube経由のアップロードに切り替え、サーバーへの負荷を減らす
1ページあたりの動画数を必要最小限に絞ることも、速度改善の対策になります。
まとめ
WordPressに動画を埋め込む方法は、直接アップロードとYouTube経由の2種類があります。
直接アップロードは外部サービスに依存しない反面、サーバーへの負荷が大きくなるため、用途を限定して使うことが重要です。
YouTube経由はサーバー容量を消費せず、表示速度への影響も最小限に抑えられます。
埋め込み後はサイズ変更や自動再生などのカスタマイズも可能ですが、著作権の確認やページ速度への影響にも注意が必要です。
著作権の確認やページ速度への影響にも注意しながら、目的に合った方法で動画を活用しましょう。
WordPressの運用には、安定したサーバー環境も重要な要素のひとつです。
ロリポップ！レンタルサーバーは管理ツールも充実しており、動画コンテンツを活用したサイト運営にも適しています。記事内で動画を頻繁に活用したい方は、ぜひご検討ください。
