埋め込みコードとは?PDF・フリップブック・動画向けガイド

埋め込みコードとは?

埋め込みコードとは、外部コンテンツ — 動画、PDF、フリップブック、地図、ツイート — を自分のウェブページ内に表示するHTMLスニペットです。読者がページを読み込むと、ブラウザが外部コンテンツを取得してインラインでレンダリングし、あたかも自分のサイトの一部であるかのように見せます。

最も一般的な基盤技術は <iframe> HTML要素で、これはページ内の長方形フレーム内に別のウェブページを読み込みます。

基本的な埋め込みコードの構造

典型的な埋め込みコードは次のようになります。

<iframe
  src="https://example.com/your-content"
  width="100%"
  height="600"
  allowfullscreen
  frameborder="0"
></iframe>

すべての埋め込みコードには次の4つが含まれます。

• src — 埋め込むコンテンツのURL。
• width と height — フレームのサイズ(ピクセルまたはパーセント)。
• パーミッション属性 — allowfullscreen、allow="autoplay"、または sandbox フラグにより、埋め込みコンテンツが特定のブラウザ機能を使えるようにします。
• オプションのスタイリング — 見た目を整える frameborder、style 属性。

読者がページを開くと、ブラウザは <iframe> タグを認識し、src のURLをリクエストし、返されたページをフレーム内にレンダリングします。

埋め込みコードはどこから取得するのか

埋め込みをサポートするすべてのプラットフォームが独自の埋め込みコードを生成します。プラットフォームからコピーしてサイトに貼り付けます。

• YouTube / Vimeo — 共有ボタン → 埋め込み → iframeコードをコピー。
• Google Maps — 共有 → 地図を埋め込む → iframeをコピー。
• Twitter / X — 投稿 → この投稿を埋め込む → コピー。
• FlipLink — すべての出版物が自動的に埋め込みコードを生成します。サインアップ不要の単発埋め込みには 無料のembed-pdfツール を使えます。

各プラットフォームは、iframe's のサイズ、パーミッション、読み込み動作を自社コンテンツ向けに調整しています。生成されたコードを変更する必要はほとんどありません — コピー、貼り付け、完了です。

埋め込みコードはリンクとどう違うのか

リンクは読者を自分のページから外部コンテンツへ移動させます。埋め込みコードは読者をページに留めたまま、外部コンテンツをインラインで表示します。

• リンク: <a href="...">動画を見る</a> — クリックでページを離れる。
• 埋め込み: <iframe src="..."> — コンテンツがインライン表示、ナビゲーションなし。

この違いは直帰率、読者エンゲージメント、アナリティクスにとって重要です。埋め込みなら、訪問者を他ドメインに逃がすことなく閲覧数を計測できます。

PDFを埋め込む: 4つの方法

PDF埋め込みは基本のiframeを超えて進化しています。シンプルな順に4つのアプローチを紹介します。

1. ネイティブ <embed> または <object> タグ

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

デスクトップブラウザでは動作しますが、モバイルでは一貫性がありません。読者にはブラウザのデフォルトPDFビューアが表示され、デバイスによって異なり、インタラクティブ性は失われます。

2. Google Docs Viewer iframe

<iframe src="https://docs.google.com/viewer?url=YOUR_PDF_URL&embedded=true" width="100%" height="600"></iframe>

無料でモバイルでも動作しますが、ビューア外観の制御が限定的で、アナリティクスはありません。

3. PDF.js ベースのカスタムビューア

Mozillaの PDF.js ライブラリをサイトに配置してカスタムビューアを埋め込みます。ブランディングと動作を完全に制御できますが、開発作業と継続的なメンテナンスが必要です。

4. フリップブックプラットフォームのiframe(ビジネス向け推奨)

<iframe src="https://your-flipbook-url" width="100%" height="600" allowfullscreen></iframe>

PDFをフリップブックプラットフォームにアップロードし、生成された埋め込みコードをコピーします。クリック可能なリンク、ページめくりアニメーション、アナリティクス、リード獲得が手に入ります — カスタムコード不要、モバイル体験も一貫。プラットフォーム別の詳細は PDFをウェブサイトに埋め込む方法 を参照してください。

埋め込みコードをレスポンシブにする

デフォルトの width="640" height="360" はモバイルで破綻します。レスポンシブな埋め込みには、アスペクト比を保つコンテナでiframeをラップしましょう。

<div style="position:relative; padding-bottom:141.4%; height:0;">
  <iframe
    src="..."
    style="position:absolute; top:0; left:0; width:100%; height:100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

padding-bottom の値がアスペクト比を決めます(141.4% = A4縦、56.25% = 16:9動画、75% = 4:3)。

セキュリティ: sandbox の役割

埋め込みコンテンツは訪問者のブラウザで実行されるため、JavaScriptを実行したり、自ドメインのCookieを読み取ったり、親ページをナビゲートしたりできます。sandbox 属性は埋め込みコンテンツができることを制限します。

<iframe src="..." sandbox="allow-scripts allow-same-origin allow-forms"></iframe>

一般的なフラグ:

• allow-scripts — JavaScriptの実行を許可
• allow-forms — フォーム送信を許可
• allow-same-origin — コンテンツをファーストパーティとして扱う(保存済みログイン状態に必要)
• allow-popups — target="_blank" リンクを許可

PDF埋め込みでは、信頼できないユーザーアップロードコンテンツを埋め込む場合を除き、デフォルト(sandboxなし)で通常は問題ありません。

よくある埋め込みコードの失敗

• 固定ピクセル幅。 width="600" は狭いモバイル画面で破綻します。width="100%" またはレスポンシブラッパーを使いましょう。
• allowfullscreen の欠落。 ユーザーが動画やフリップブックビューアをフルスクリーンに拡大できません。
• ページビルダーによるiframeの削除。 一部のCMSエディタ(Squarespace埋め込みブロック、カスタムHTMLブロックなしのWordPress)はiframeタグを削除します。埋め込みコードは常に「コード」または「カスタムHTML」ブロックに貼り付けましょう。
• コンソールのクロスオリジンエラー。 一部の埋め込みは、ソースから特定のCORSヘッダーが必要です。埋め込みが壊れて見える場合、ブラウザコンソールを確認しましょう。
• ページエディタでのプレビュー崩れ。 多くのCMSエディタは編集モードでiframeをレンダリングしません — プレビューではなく公開済みページで必ず確認してください。

よくある質問

iframeと埋め込みコードは同じものですか?

iframeは埋め込みコードの一種 — 最も一般的なものです。埋め込みコードには <embed>、<object>、<video>、プラットフォーム固有のJavaScriptウィジェットも使えます。PDFとフリップブックではiframeが標準です。

PDFを埋め込むとウェブサイトは遅くなりますか?

iframeはオンデマンドでPDFを読み込むため、ユーザーがスクロールして到達したときにのみページパフォーマンスに影響します。loading="lazy" をiframeに付けて、埋め込みがビューポート付近に来るまで読み込みを遅延させましょう。

埋め込みコンテンツの外観をカスタマイズできますか?

外枠(サイズ、枠線、位置)はiframeのCSSで制御できます。内部コンテンツの見た目は埋め込みコードを生成したプラットフォームに依存します。FlipLinkでは埋め込みビューアに ブランドカラーとカスタムスタイリング を適用できます。

埋め込みコードはどのウェブサイトビルダーでも動作しますか?

生のHTMLの貼り付けをサポートするサイト(WordPress Custom HTML、Wix HTML iframe、Squarespace Code Block、Webflow Embed、Shopify Custom Liquid、Notion /embed)ではiframe埋め込みコードを受け付けます。ビルダーによっては追加のプラットフォーム制限があります — 詳細は プラットフォーム別埋め込みガイド を参照してください。

PDF用の埋め込みコードはどうやって入手しますか?

無料のembed-pdfツール を使います。PDFをアップロードすると数秒でiframe埋め込みコードが手に入ります。単発の埋め込みにはサインアップ不要です。

関連記事

• PDFをウェブサイトに埋め込む方法: 5つの方法を比較
• PDFをウェブサイト・文書・メールに挿入する方法
• フリップブックをSquarespaceに埋め込む方法
• フリップブックをShopifyに埋め込む方法
• インタラクティブPDFとは?