HTML
iframeが表示されない
埋め込み先がiframeを拒否している
こんな症状
<iframe>を書いたのに中身が表示されない。外部サイトを埋め込もうとしたときに起きやすいよ。
まず試す
埋め込み先が iframe を許可しているか確認し、YouTube/地図などは公式の「埋め込みコード」を使う。
html
<!-- 埋め込みを許可しているURL（公式の埋め込みコード等）を使う -->
<iframe src="https://www.youtube.com/embed/動画ID"></iframe>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓外部サイトが表示されない
→ そのサイトが iframe 埋め込みを禁止している可能性大。許可されたURLを使う。 - ✓YouTube・地図を埋めたい
→ 公式の「埋め込みコード（embed）」をそのまま使う。 - ✓自分のサイト同士
→ 問題なく表示できる。パスやsrcを確認する。
なぜ起きる？
多くのWebサイトはセキュリティのためにX-Frame-Optionsヘッダーで他サイトからのiframe埋め込みを禁止しているよ。これはクリックジャッキング攻撃を防ぐための対策なんだ。埋め込みを許可していないサイトはiframeで表示できないよ。
✕ エラーが起きるコード
<iframe src="https://example.com"></iframe>
<!-- X-Frame-Options で拒否 -->✓ 直したコード
<!-- 埋め込み許可されたURLを使用する -->✅ 直ったか確認
iframe 内にコンテンツが表示されればOK。
🆘 まだ直らないときは
DevToolsのConsoleで X-Frame-Options / CSP frame-ancestors の拒否メッセージが出ていないか確認しよう。
Q&Aで質問する →この解決法は役立ちましたか？
🔗 関連するエラー
- 画像が表示されない — 画像パスが間違っている
- 拡張子が表示されない（.html が見えない） — OS の設定で拡張子が非表示
- favicon（ファビコン）が表示されない — faviconのパス・形式・キャッシュの問題
- videoタグで動画が再生されない — ファイルパスまたはフォーマットの問題
- dialogタグが表示されない — showModal()を呼んでいない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説