タイトル: embed要素
SEOタイトル: HTML embed要素(外部リソース埋め込み / src / type / 主な用途と video / iframe との使い分け)
| この記事の要点 |
|
embed 要素とは
embed 要素()は、外部リソース(PDF、Flash、各種プラグインコンテンツなど)を HTML ページに埋め込み表示するための要素です。void 要素のため終了タグはなく、属性で URL や種別を指定します。
基本構文
属性
| 属性 | 意味 |
|---|---|
src | 埋め込むリソースの URL |
type | リソースの MIME タイプ(application/pdf など) |
width | 幅(px) |
height | 高さ(px) |
object / iframe / video との使い分け
| 要素 | 主用途 | 特徴 |
|---|---|---|
| PDF / SVG / プラグインコンテンツ | 属性のみで簡潔。代替コンテンツを持てない |
| 同上 + フォールバック表示 | で詳細パラメータ。要素内に代替コンテンツを書ける |
| 別 HTML ページの埋め込み | YouTube 埋め込みや外部サイトの表示に標準的 |
| 動画 | MP4 / WebM を制御 API 付きで再生 |
| 音声 | MP3 / Ogg / WAV |
| 画像 | 静的画像 / SVG |
典型用途:PDF プレビュー
現代の の主用途はPDF のインライン表示です。ブラウザ内蔵の PDF ビューアが表示されます。
同じ用途を や でも実現できます。
レスポンシブ対応
自体に aspect-ratio はありませんが、ラッパー要素 + CSS で対応できます。
セキュリティ上の注意
- 信頼できないドメインのリソースを埋め込むと XSS / クリックジャッキングのリスク
- 埋め込んだ外部コンテンツは
X-Frame-Options/Content-Security-Policyの影響を受ける - 外部 PDF をホストする場合は HTTPS 必須。HTTP 混在はMixed Content でブロック
- Flash / Java Applet はもうサポートされない。レガシーコードは置き換える
非推奨ではないが避けるべきケース
| 用途 | 推奨 |
|---|---|
| 動画 | |
| 音声 | |
| YouTube 埋め込み | |
| SVG | または 直接 |
| 別 HTML ページ | |
/ / |
まとめ
は外部リソースを埋め込む void 要素- 属性は
src/type/width/heightがほぼ全て - 現代の主用途は PDF プレビュー
- 動画 →
、外部ページ →を優先 - フォールバックが必要なら
を選ぶ
サイズと表示位置の指定
は width / height 属性で px 値を直接指定できますが、現代のレスポンシブデザインではラッパー要素 + CSS でアスペクト比固定にしたほうが扱いやすくなります。aspect-ratio プロパティが使えるブラウザではラッパーに aspect-ratio: 16 / 9 を指定するだけで OK です。 や も同様にラッパーで包むのが定石で、レイアウトシフト(CLS)の改善にも効きます。古いブラウザを切り捨てたくない場合はパディングハック(padding-top: 56.25%)で同等の挙動を再現できます。
サンドボックスと CSP
は のような細粒度のサンドボックス属性を持ちません。信頼できないリソースを埋め込みたいときは、可能なら に置き換えるほうが安全です。サーバ側で Content-Security-Policy ヘッダに object-src 'self' を指定すると、 / の読み込み元を制限でき、サードパーティの予期しないリソース埋め込みを防げます。HTTPS ページからは http:// リソースを埋め込めない(Mixed Content)ため、リンク先のホスト側も TLS 化されている必要があります。
ブラウザでの PDF 表示挙動の差
| ブラウザ | 挙動 |
|---|---|
| Chrome / Edge | 内蔵ビューアで表示 |
| Firefox | PDF.js で表示 |
| Safari | 内蔵プレビューで表示 |
| iOS Safari / Android Chrome | 新規タブに移動するケースあり。インライン表示が不安定 |
モバイルでの確実なインライン表示は難しいため、「PDF を開く」リンクを併設するのが堅実です。
関連
- param要素 — object のパラメータ要素
- object要素 — フォールバック付き埋め込み
- iframe要素 — 別 HTML 文書の埋め込み
- video要素 — 動画再生
- audio要素 — 音声再生