iframe との使い分け）

この記事の要点

embed 要素（<embed>）は外部リソース（PDF / Flash / 各種プラグインコンテンツ）を埋め込むための HTML 要素
src（URL）と type（MIME タイプ）、width / height を指定するvoid 要素
<object> と機能が似ているが、embed はパラメータを属性で渡し、object は <param> で渡す
現代では Flash 廃止に伴いPDF 埋め込みが主用途。動画は <video>、外部ページは <iframe> が標準
セキュリティ上、信頼できない外部リソースを埋め込むと XSS / クリックジャッキングのリスク

embed 要素とは

embed 要素（<embed>）は、外部リソース（PDF、Flash、各種プラグインコンテンツなど）を HTML ページに埋め込み表示するための要素です。void 要素のため終了タグはなく、属性で URL や種別を指定します。

基本構文

<!-- PDF の埋め込み -->
<embed src="/files/manual.pdf" type="application/pdf" width="800" height="600">

<!-- SVG の埋め込み -->
<embed src="/img/diagram.svg" type="image/svg+xml" width="400" height="300">

属性

属性	意味
`src`	埋め込むリソースの URL
`type`	リソースの MIME タイプ（`application/pdf` など）
`width`	幅（px）
`height`	高さ（px）

object / iframe / video との使い分け

要素	主用途	特徴
`<embed>`	PDF / SVG / プラグインコンテンツ	属性のみで簡潔。代替コンテンツを持てない
`<object>`	同上 + フォールバック表示	`<param>` で詳細パラメータ。要素内に代替コンテンツを書ける
`<iframe>`	別 HTML ページの埋め込み	YouTube 埋め込みや外部サイトの表示に標準的
`<video>`	動画	MP4 / WebM を制御 API 付きで再生
`<audio>`	音声	MP3 / Ogg / WAV
`<img>`	画像	静的画像 / SVG

典型用途：PDF プレビュー

現代の <embed> の主用途はPDF のインライン表示です。ブラウザ内蔵の PDF ビューアが表示されます。

<embed
  src="/docs/spec.pdf"
  type="application/pdf"
  width="100%"
  height="600">

同じ用途を <iframe> や <object> でも実現できます。

<!-- iframe での代替 -->
<iframe src="/docs/spec.pdf" width="100%" height="600" title="仕様書"></iframe>

<!-- object での代替（フォールバック付き） -->
<object data="/docs/spec.pdf" type="application/pdf" width="100%" height="600">
  <p>PDF を表示できません。<a href="/docs/spec.pdf">こちらからダウンロード</a>してください。</p>
</object>

レスポンシブ対応

<embed> 自体に aspect-ratio はありませんが、ラッパー要素 + CSS で対応できます。

<div style="position:relative;width:100%;aspect-ratio:4/3">
  <embed src="/docs/spec.pdf" type="application/pdf"
         style="position:absolute;inset:0;width:100%;height:100%">
</div>

セキュリティ上の注意

信頼できないドメインのリソースを埋め込むと XSS / クリックジャッキングのリスク
埋め込んだ外部コンテンツは X-Frame-Options / Content-Security-Policy の影響を受ける
外部 PDF をホストする場合は HTTPS 必須。HTTP 混在はMixed Content でブロック
Flash / Java Applet はもうサポートされない。レガシーコードは置き換える

非推奨ではないが避けるべきケース

用途	推奨
動画	`<video>`
音声	`<audio>`
YouTube 埋め込み	`<iframe>`
SVG	`<img>` または `<svg>` 直接
別 HTML ページ	`<iframe>`
PDF	`<embed>` / `<iframe>` / `<object>`

まとめ

<embed> は外部リソースを埋め込む void 要素
属性は src / type / width / height がほぼ全て
現代の主用途は PDF プレビュー
動画 → <video>、外部ページ → <iframe> を優先
フォールバックが必要なら <object> を選ぶ

サイズと表示位置の指定

<embed> は width / height 属性で px 値を直接指定できますが、現代のレスポンシブデザインではラッパー要素 + CSS でアスペクト比固定にしたほうが扱いやすくなります。aspect-ratio プロパティが使えるブラウザではラッパーに aspect-ratio: 16 / 9 を指定するだけで OK です。<object> や <iframe> も同様にラッパーで包むのが定石で、レイアウトシフト（CLS）の改善にも効きます。古いブラウザを切り捨てたくない場合はパディングハック（padding-top: 56.25%）で同等の挙動を再現できます。

サンドボックスと CSP

<embed> は <iframe sandbox> のような細粒度のサンドボックス属性を持ちません。信頼できないリソースを埋め込みたいときは、可能なら <iframe sandbox="allow-scripts"> に置き換えるほうが安全です。サーバ側で Content-Security-Policy ヘッダに object-src 'self' を指定すると、<embed> / <object> の読み込み元を制限でき、サードパーティの予期しないリソース埋め込みを防げます。HTTPS ページからは http:// リソースを埋め込めない（Mixed Content）ため、リンク先のホスト側も TLS 化されている必要があります。

ブラウザでの PDF 表示挙動の差

ブラウザ	挙動
Chrome / Edge	内蔵ビューアで表示
Firefox	PDF.js で表示
Safari	内蔵プレビューで表示
iOS Safari / Android Chrome	新規タブに移動するケースあり。インライン表示が不安定

モバイルでの確実なインライン表示は難しいため、「PDF を開く」リンクを併設するのが堅実です。

ページ一覧

その他