レスポンシブiframe埋め込み生成ツールとは
レスポンシブiframeマークアップは、埋め込みコンテンツがはみ出したり、レイアウトがずれたり、アクセシビリティ属性が欠落したりするのを防ぎます。動画、マップ、デモ、スライド、ドキュメンテーションウィジェットに便利です。適切な埋め込みには、タイトル、適切な場合の遅延読み込み、安定したアスペクト比、埋め込みに必要な権限のみが含まれます。
クイックアンサー
アスペクト比、遅延読み込み、サンドボックス制限、タイトル属性付きのレスポンシブiframe埋め込みマークアップを生成します。出力にはCSSとHTMLが含まれ、レイアウトシフトを回避する安定した埋め込みを実現します。
Last updated: 2026-06-11
制限事項
- サンドボックス制限は、スクリプト、フォーム、ポップアップ、同一オリジンストレージに依存する埋め込みコンテンツを壊す可能性があります。サンドボックストークンを選択的に追加し、制限を適用した後で埋め込みをテストしてください。
- aspect-ratio CSSプロパティは、従来のpadding-bottomハックよりも新しいアプローチです。古いブラウザでは、レスポンシブiframeがアスペクト比を維持するためにpadding-bottomのフォールバックが必要な場合があります。
- 遅延読み込み（loading=lazy）は、フォールドより上の埋め込みのレンダリングを遅らせる可能性があります。ページ上部付近に表示される埋め込みには、eager読み込みまたは遅延属性なしの埋め込みを検討してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- iframeのソースURLを貼り付け、明確なタイトルを記述します。
- アスペクト比と遅延読み込みを有効にするかどうかを選択します。
- 埋め込みページが選択した制限で動作する場合にのみ、サンドボックスを有効にします。
- HTMLとCSSを、埋め込みが表示されるべきページにコピーします。
主な用途
- 固定幅オーバーフローなしで動画を埋め込む。
- ドキュメンテーションにライブデモのiframeを追加する。
- 安定したアスペクト比とタイトルを持つマップ埋め込みを作成する。