Iframe埋め込みコード — 1つのタグであらゆるプラットフォーム

Iframe埋め込みコード

AVCaptionのすべての動画には1つのiframeコードが付きます:

<iframe
  src="https://avcaption.com/watch/{your_embed_token}"
  frameborder="0"
  allow="autoplay; encrypted-media; fullscreen"
  allowfullscreen
  loading="lazy"
  width="100%"
  style="aspect-ratio: 16/9"
></iframe>

HTMLを受け付けるあらゆるプラットフォームに貼り付けるだけです。

動作確認済みの場所

CMS / ブログ

  • WordPress(Custom HTMLブロック、Codeブロック、投稿の生HTML)
  • Ghost(HTMLカード)
  • Substack(投稿内のHTML、有料投稿含む)
  • Medium(制限あり — ブックマークカードのみ、iframe不可)
  • Hashnode(Embedブロック)

LMS / コースプラットフォーム

  • Teachable(Videoブロックは「Custom Code」経由でiframeコードを受け付け)
  • Thinkific(Custom Codeブロック)
  • Kajabi(投稿および商品ページのHTMLブロック)
  • LearnDash(レッスン本文のHTML)
  • LearnWorlds(Embedブロック)
  • Podia(Custom HTML)

ノーコードビルダー

  • Webflow(Embed要素)
  • Bubble(HTML要素)
  • Wix(HTML iframeブロック)
  • Squarespace(Codeブロック)
  • Carrd(Embedセクション)
  • Framer(Embedコンポーネント)

生産性 / ナレッジ

  • Notion(/embed スラッシュコマンド)
  • Coda(Embed)
  • ClickUp(Embedビュー)

メール — 制限あり。 多くのメールクライアント(Gmail、Outlook)はiframeをブロックします。代わりにog:imageプレビュー付きのリンクを送ってください。

URLパラメータ

iframeの src にクエリパラメータを追加します:

  • ?autoplay=1&muted=1 — ロード時に再生開始(autoplayにはmutedが必要)
  • ?start=120 — 120秒地点へシーク
  • ?subtitle=vi — ベトナム語字幕を事前選択
  • ?quality=1080 — 1080pバリアントを強制
  • ?loop=1 — 終了時に再開
  • ?controls=0 — 全コントロールを非表示(キオスクモード)

複数組み合わせ: ?autoplay=1&muted=1&start=30&subtitle=es。

セキュリティヘッダー

iframeは以下のヘッダーで応答します:

  • Content-Security-Policy: frame-ancestors {your_whitelist} — ブラウザがホワイトリスト外のオリジンへの埋め込みをブロック
  • Referrer-Policy: strict-origin — リファラ情報をscheme+hostに制限
  • Permissions-Policy: autoplay=*; fullscreen=* — allow 属性を機能させるために必要

設定は不要 — AVCaptionがあなたのドメインホワイトリストに基づいて適切なヘッダーをセットします。

パフォーマンス

  • ファーストペイント: 4Gモバイルで600〜900ms、ブロードバンドで300ms未満
  • HLS.js + プレーヤーJS: 約60KB(minified+gzipped)
  • 最初のセグメントはアップロード時に事前ウォーミング、CDNエッジから配信
  • loading="lazy" でユーザーがiframe付近にスクロールするまで読み込みを遅延(推奨)

レスポンシブサイズ

width="100%" と aspect-ratio: 16/9 を使えばiframeは完全にレスポンシブです。動画はコンテナにスケールし、これがほとんどのサイトで望ましい挙動です。

固定ピクセルサイズの場合: width="800" height="450"(または他の16:9比率)。

非16:9(例: 4:3のアーカイブ動画)の場合: aspect-ratio: 4/3 を設定してソースに合わせます。

はじめる

AVCaptionにアップロードしたどの動画も、動画詳細ページにiframeコードが付いています。テスト動画を1本アップロードし、iframeをコピーして、Notionドキュメントや下書きの記事に貼り付けてみてください——Teachable、Kajabi、Confluence、Salesforce Communityページ、自社サイトでも同じようにレンダリングされます。よくある埋め込み先：LMS動画ホスティング、オンラインコース、デジタルプロダクト。

よくあるご質問

iframe埋め込みはWordPressで動きますか? +
はい。Custom HTMLブロック、Codeブロック、または投稿のHTMLに直接貼り付けてください。WordPressのscriptタグ除去はiframeには影響しません。
Teachable、Thinkific、KajabiのようなLMSで動きますか? +
はい。主要LMSはすべてiframe埋め込みに対応しています。専用の「動画埋め込み」ブロックを持つものもあれば、生のHTMLを受け付けるものもあります — どちらも動きます。
Notion、Substack、Ghost、Bubbleはどうですか? +
Notionは /embed スラッシュコマンドでiframe埋め込みに対応します。Substackは有料ニュースレターでiframeに対応。Ghostにはカスタム HTMLブロック、BubbleにはHTML要素があります。すべて動きます。
← content.back_to_index