WordPressにYouTube動画を埋め込む方法と表示までの手順
YouTubeのURLをエディターに貼るだけで、動画は埋め込めます。ブロックエディター（Gutenberg）には、URLを検知して自動的に埋め込みブロックへ変換するoEmbedという仕組みがあるためです。
とはいえ自動変換に頼りきると、表示崩れや読み込み遅延で足をすくわれます。仕組みを理解して使い分けましょう。
URLの貼り付けだけで自動埋め込みする手順とブロックの挙動
段落ブロックに動画URLを1行だけ貼り付けると、数秒後に「YouTube」ブロックへ切り替わり、プレビューが表示されます。変換されない場合は、ブロック追加メニューから「YouTube」埋め込みブロックを選び、URLを入力してください。
ここで気をつけたいのは、URLの前後にテキストや空白があると変換が走らないことです。共有ボタンで得られる短縮URL（youtu.be形式）でも動きますが、再生開始位置つきのパラメータは無視される場合があります。
埋め込みコードとブロックのどちらを使うかの判断基準
基本はブロックで十分です。oEmbed経由なら幅が自動調整され、テーマ更新後も壊れにくい。YouTube側の「共有」→「埋め込む」で得られる<iframe>コードは、次のように細かい制御が必要なときだけ使います。
- 関連動画の抑制や自動再生など、パラメータを明示的に指定したい
- カスタムHTMLブロックやテーマのテンプレートに直接組み込みたい
ただしiframeを貼ると、多くのセキュリティプラグインやHTMLフィルターがタグを削除してしまうことがあります。セキュリティ設定を見直し、投稿者の権限で保存できているか確認してください。
埋め込んだYouTube動画が表示されない・重くなる原因と確認方法
「保存後に動画が消える」「白い枠だけ残る」という相談は珍しくありません。原因の多くは、iframeがサニタイズで除去されているか、テーマのCSSが埋め込み要素の高さを潰しているかのどちらかです。
まずはブラウザの開発者ツールで、iframe要素がHTMLに残っているかを確認します。要素自体が無ければサーバー側で削除されており、残っているのに見えないならCSSの問題です。この切り分けを先に済ませましょう。
レスポンシブ表示崩れとページ速度低下を検証・改善する手順
スマホで動画が横にはみ出したり縦に潰れたりする崩れは、iframe直貼りでwidthとheightが固定値になっているのが原因です。ブロックの埋め込みならアスペクト比が保持されるので、まずはブロックへの置き換えを検討してください。
速度面では、動画を複数貼ると初期表示でYouTube側のスクリプトが同時に読み込まれ、Largest Contentful Paintが悪化します。まずPageSpeed Insightsで対策前後を比較し、サムネイル画像を先に表示して再生時に本体を読む「遅延読み込み」対応のプラグインを検討するとよいでしょう。
プラグイン追加前に本体を最新へ更新して動作を確認しておくと、不具合が起きたときの切り分けが楽になります。
EC-CUBEゴールドパートナー
WordPress構築・保守 
