iframeジェネレーター：任意のURLの埋め込みコードを作成
iframeジェネレーター
iframeジェネレーター：プレビュー付きレスポンシブ埋め込みコード | We.Inc
任意のURLのiframeコードを作成します。レスポンシブなアスペクト比か固定サイズ、遅延読み込み、タイトル、sandboxトークン、allow、リファラーポリシーを、ライブプレビュー付きで設定できます。
埋め込みたいアドレスを貼り付け、フレームにタイトルを付け、レスポンシブな形か固定サイズを選ぶと、このジェネレーターが遅延読み込み、sandboxトークン、権限、リファラーポリシーを含むiframeタグを書き出します。下のプレビューは入力したアドレスを読み込むので、コードを貼り付ける前に、そのサイトが実際にフレームへの埋め込みを許可しているかを確認できます。
各オプションが書き出す内容
- オプション
- 属性またはスタイル
- このツールでのデフォルト
- タイトル
- title="..."
- 必須。スクリーンリーダーが使用
- レスポンシブな形
- style="width:100%;aspect-ratio:16 / 9"
- 固定サイズ
- 幅と高さ
- ブラウザーのデフォルトは300 × 150
- sandbox
- sandbox="..."
- オフ。制限するにはトークンにチェック
- 権限
- allow="fullscreen; ..."
- フルスクリーンのみ
- リファラー
- referrerpolicy="..."
ネット上のiframeスニペットの多くは、最近の埋め込みに必要な要素のどれかが欠けています。支援技術のためのタイトル、最初の画面を遅くしないための遅延読み込み、レスポンシブなサイズ、そして最小限の権限です。このツールは、どのアドレスに対してもそのすべてを書き出します。有名なサービスの動画、地図、予約ページなら、埋め込みコードジェネレーターで共有リンクを埋め込み用リンクに変換することもできます。
- 埋め込むページの完全なhttpsアドレスを貼り付け、内容を表す短いタイトルを書きます。
- アスペクト比を指定する「レスポンシブ」か、ピクセル単位で幅と高さを指定する「固定」を選びます。
- 埋め込みがページの一番上にある場合を除き、遅延読み込みはオンのままにしておきます。
- コンテンツを完全には信頼できない場合はsandboxトークンにチェックを入れ、権限は埋め込みに必要なものだけにチェックを入れます。
- 「プレビューを読み込む」を押すと、コードのとおりに埋め込みが表示されます。確認したらコードをコピーします。
- プレビューに灰色の「接続が拒否されました」という枠が表示される場合、そのサイトはフレームへの埋め込みを禁止しています。どの属性でもこれは変えられません。このエラーについてのガイドを参照してください。
- 動画や地図には、サービスが提供する埋め込み用アドレスを使いましょう。通常のページのアドレスは、フレームへの埋め込みがブロックされていることがよくあります。
- allowはできるだけ小さく保ちましょう。カメラや位置情報など、列挙した機能はすべて埋め込み先のサイトに提供されます。
- 重い埋め込みは最初の画面より下に置き、遅延読み込みが役目を果たせるようにしましょう。
- 自分のサイトのコンテンツに対して、allow-scriptsとallow-same-originの両方にチェックを入れないでください。2つがそろうとsandboxが無効になります。
よくある質問
iframeをレスポンシブにするには？
幅を100%にし、16 / 9 などのアスペクト比を指定して、高さは自動のままにします。こうすると、ブラウザーはどの幅でも形を保ちます。アスペクト比の指定が広くサポートされた今では、以前のpadding-topを使ったラッパーの技は不要です。
iframeの loading="lazy" は何をしますか？
フレームがページの見えている部分に近づくまで読み込みを遅らせます。デフォルトは、すぐに読み込むeagerです。遅延読み込みは、ページの下のほうにあるフレームについて通信量を節約し、最初の表示を速くします。
すべてのiframeにタイトルが必要なのはなぜですか？
スクリーンリーダーの利用者は、タイトルを頼りにフレーム間を移動します。「Leedsスタジオの予約カレンダー」のようなわかりやすいタイトルがあれば、中に入る前に何があるかがわかります。
allow属性には何を書けばよいですか？
埋め込みに必要な機能だけを、セミコロンで区切って書きます。例：allow="fullscreen; picture-in-picture"。オリジンを書かずに機能を列挙すると、srcのオリジンに対して許可されます。allowは、そのページ自身のPermissions-Policyヘッダーが許可する範囲を狭めることしかできず、広げることはできません。
プレビューで私のデータがどこかに送られますか？
私たちにデータが送られることはありません。コードはこのページ内で作成されます。プレビューはブラウザー内の普通のiframeなので、埋め込み先のサイトには、訪問者が読み込んだときと同じく、あなたからの通常のアクセスが届きます。
どの埋め込みにも使えるチェックリスト
- タイトル、サイズ、読み込み、権限、sandbox、リファラー。この6つを決める必要があり、ジェネレーターはそれぞれを明示的に書き出します。ここでのデフォルトは安全な設定です。遅延読み込み、レスポンシブ、サイトをまたぐ場合はオリジンだけを送るリファラーポリシー、そしてフルスクリーン以外の追加権限なしです。
- コードを貼り付けたら、スマートフォンの幅でテストしましょう。ピクセルで幅を固定したフレームは、モバイルで横スクロールが発生する最も一般的な原因です。
プレビューが空白のまま、または拒否される場合
- 灰色のエラー枠は、埋め込み先のサイトがフレームへの埋め込みを制限するヘッダーを送ったことを意味します。真っ白なフレームは、チェックを入れたsandboxトークンが、サイトに必要なスクリプトやフォームをブロックしていることが多いです。sandboxのチェックを外して試すと、どちらなのかを見分けられます。
- フレームに埋め込まれたことを検知して、別のページを表示するサイトもあります。その挙動はサイト側が決めることで、外部から変えることはできません。
プライバシーとパフォーマンス
- iframeはどれも、独自のスクリプトや、場合によっては独自のCookieを持つ、別サイトの完全なページです。プライバシーポリシーで埋め込んだサードパーティのコンテンツについて触れ、サービスが提供していればプライバシーに配慮した埋め込みモードを選びましょう。
- 埋め込みが大きく、必須でない場合は、クリックで読み込むプレースホルダーを検討しましょう。画像とボタンを表示し、誰かが求めたときにだけiframeを挿入します。
すぐに使えるパターン
アスペクト比を使ったレスポンシブなフレーム
ウィンドウのサイズを変えても、フレームは形を保ちます。この例の中身のページはsrcdocから読み込むので、オフラインでも動きます。
クリックで読み込むプレースホルダー
ボタンが押されるまで、別のサイトからは何も読み込まれません。本物のiframeはtemplateタグの中に入っています。
iframeを作成
埋め込むアドレス（https）
タイトル（内容を説明）
サイズ
レスポンシブ
固定
アスペクト比
幅（px）
高さ（px）
遅延読み込み（loading="lazy"）
コンテンツをsandbox化
sandboxトークン
権限（allow）
リファラーポリシー
生成されたコード
コードをコピー
プレビューを読み込む
プレビューはブラウザーでアドレスを読み込みます。灰色のエラー枠が表示された場合、そのサイトはフレームへの埋め込みを拒否しています。
https:// または http:// で始まる完全なアドレスを入力してください。
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る