Teachable / Thinkific / Kajabiに動画を埋め込む — iframe方式

Teachable / Thinkific / Kajabiに動画を埋め込む — iframe方式

Teachable、Thinkific、Kajabiの動画料金の壁にぶつかった——あるいは単に自分でコントロールできるプレイヤーが欲しいなら、解決策は専用動画ホストからのiframe埋め込みです。3プラットフォームともメカニクスは同じで、違うのはiframeを貼り付けるUIだけです。

これがその実践ウォークスルー。

なぜわざわざ?

各LMSにはそれぞれの「動画税」があります:

  • Teachable は上位ティアで動画を無制限としていますが、下位ティアでは帯域を絞ります。「Pro」ティアが解錠で、安くはありません。
  • Thinkific はプラン別に動画アセット数を制限し、ライブラリが大きくなるにつれて価格を積極的に階段状に上げます。
  • Kajabi は動画をプラットフォーム価格に内包しますが、アセットあたり/総ストレージの上限が厳しいです。

ライブラリが数十レッスン以上、または視聴者が伸びると、最終的に算数が動画を専用ホストへ逃がすことを要求します。さらに、LMS同梱プレイヤーは汎用——色を変えたり、ウォーターマークを足したり、エンコーディングラダーを選んだりはできません。

打ち手は普遍的:動画は他所でホスト、iframeで埋め込み、LMSは得意領域(コース構造、決済、ドリップ配信、コミュニティ)に専念させる。

一般パターン

現代の動画ホストは埋め込みスニペットを提供します — AVCaptionの正規スニペット、モバイルで16:9を強制するラッパーdivパターン、フルスクリーンとピクチャ・イン・ピクチャ用の allow 属性についてはiframe埋め込みコード機能ページをご覧ください。

LMSごとに変わるのは、どこに貼り付けるかです。

Teachable

  1. Teachableでコースを開き、更新したいレクチャーを開く。
  2. + Add ContentCode</>ブロック。Videoブロックではない——Videoブロックは内蔵ホスティングを使います)。
  3. iframeスニペットを貼り付け、保存。
  4. シークレットウィンドウでプレビューして再生確認。

ヒント:コース全体の動画をTeachableから移すなら、まず1レッスンでテスト。モバイル再生、フルスクリーン、動画ホスト側のドメインホワイトリストを確認。

Thinkific

  1. コースビルダーでレッスンを開く。
  2. レッスンタイプを Multimedia に変更(または HTML レッスン要素を追加)。
  3. iframeスニペットをHTMLブロックに貼り付け、保存。
  4. 完了ゲートが必要なら Set lesson as required を有効化。動画ホストが完了イベントをプッシュしない場合は手動完了ボタンと組み合わせます。

Thinkificのプレビューは信頼できます——プレビューで見たものが受講者にも見えます。

Kajabi

  1. プロダクトで更新したい投稿(レッスン)を開く。
  2. コンテンツエディタから Custom Code ブロックを追加。
  3. iframeスニペットを貼り付け、保存して公開。
  4. Kajabiの Preview as Customer で確認。

KajabiのHTMLサニタイザは時々属性を剥がします。allowfullscreen が消えたら、ソースビューから付け直してください。

埋め込みを自ドメインにロックする

iframeをLMSに置いた瞬間、ページソースを見た人は誰でも埋め込みURLを見ることができます。ドメインホワイトリストがなければ、そのURLは貼り付けたどんなサイトでも動きます。

まともな動画ホスト(AVCaptionを含む)は動画ごとのiframe埋め込みコード制限をサポートします。*.teachable.com*.thinkific.com*.kajabi.com(と独自ドメイン)を許可リストに追加。これで埋め込みは自分のコースサイトでしかレンダリングされません。

これは本気の攻撃者を止めるものではありません(Refererは偽装可能)が、怠惰な再投稿——現実の海賊行為のほとんど——を断ちます。

動画本体を暗号化する

ドメインホワイトリストは埋め込みを守ります。動画本体を守るには、ホストがセグメントを暗号化する必要があります。AES-128マルチキーHLSが2026年の標準——セグメントはキーがなければ無意味、キーは署名付き、署名URLは短期失効。

現状LMSにMP4を直アップロードしているなら、暗号化はゼロです。ブラウザでレッスンを開いて yt-dlp をかければファイルが手に入ります。暗号化動画ストリーミングホストへの移行で1ステップで解決します。

プレイヤーをブランディングする

汎用プレイヤーはコースをYouTube臭くします。ブランド対応プレイヤーはプロダクト感を出します。AVCaptionのカスタム埋め込みプレイヤーはアクセントカラー、ロゴ、(Enterpriseで)視聴者ごとのウォーターマークを設定できます。

これは思っている以上に効きます。プレミアム感のあるプレイヤー = プレミアム感のあるコース = 返金率の低下。プレイヤーをリブランドした後、Premiumティアの顧客では返金リクエストが目に見える割合で削れる事例があります。

多言語字幕の追加

オーディエンスがグローバルなら、AI字幕は売上を複利で押し上げます。AVCaptionの多言語字幕(Enterprise)は、ソース音声から50以上の言語にキャプションを生成・翻訳します。

ソース言語を一度設定し、ターゲットを選ぶだけで、プレイヤーがキャプションメニューに表示します。翻訳代理店は不要です。詳細:AIでコース動画に多言語字幕を追加する方法

本物の進捗トラッキング(任意)

Teachable / Thinkific / Kajabi内で本物の視聴時間アナリティクスが欲しいなら、プレイヤーから親ページへイベントをプッシュする必要があります。AVCaptionプレイヤーは playpauseprogressendedpostMessage イベントを発行します。LMSテーマに数行のJSを足せば、90%視聴でレッスンを完了扱いにできます。

これは多くの制作者がやりたい以上の作業量です。代替は標準の「Mark as complete」ボタン——95%のコースでは十分です。

やるべきでないケース

  • 小さいライブラリ、低トラフィック。 コース全体が3時間でトータル200名なら、LMS同梱プレイヤーで十分。理由なく複雑性を増やさないこと。
  • エンジニアリングの帯域がない。 iframe + ドメインホワイトリストは10分の変更。プレイヤーイベントとウォーターマークロジックは半日仕事。実際に維持できる範囲を正直に。
  • スタジオライセンスコンテンツ。 Widevine DRMが義務付けられたライセンス素材を再販しているなら、汎用埋め込みではなくVdoCipher領域です。

AVCaptionの位置づけ

AVCaptionは「LMSへのiframe埋め込み」ワークフローを目的に設計されています。フリーティア(広告付き)で統合を端から端までテストできます。Premium($100/月、5 TB)で広告除去、ドメインホワイトリスト、署名URL、ブランドプレイヤーが解錠。Enterpriseでウォーターマークと多言語字幕。

ユースケース概観:LMS動画ホスティングオンラインコース

まとめ

LMSから動画を逃がす上で一番難しいのは「決断」です。メカニクスはプラットフォームあたり10分。定額のホストを選び、セグメントを暗号化し、ドメインをロックし、プレイヤーをブランディングして、二度とLMSの帯域請求書を心配しない。

残り全部に手を付ける前に、Teachable / Thinkific / Kajabiの1レッスンでテストを。AVCaptionのアカウントを作成、1レッスンをアップロード、1レッスンページにiframeを貼り付け、シークレットで再生とドメインホワイトリストの403を確認。1レッスンで動けば、あとはコピペです。

よくあるご質問

なぜLMS内蔵プレイヤーではなく外部動画を埋め込むのですか? +
コスト、コントロール、アナリティクスのためです。LMS同梱の動画はストレージ上限が厳しいか、帯域がサブスクリプションティアに含まれており、規模が大きくなると結局高くつきます。外部埋め込みなら、定額料金、暗号化、自分でブランディングできるプレイヤーを備えた動画ホストを選べます。
iframe埋め込みはTeachable / Thinkific / Kajabiのモバイルアプリで動きますか? +
TeachableのiOSアプリやThinkificのモバイルWebでは、現代のiframeは問題なく動作します。Kajabiのモバイル体験は、レッスンページラッパー内にカスタム埋め込みをレンダリングします。プラットフォームのアップデートで挙動が変わることがあるため、ローンチ前に各プラットフォームでテストしてください。
埋め込みプレイヤーでLMSの進捗トラッキングは維持できますか? +
部分的に可能です。多くのLMSはユーザーがボタンを押したときにのみレッスンを「完了」にします。本物の進捗トラッキング(視聴率、離脱ポイント)にはJSイベントAPIを公開するプレイヤーが必要です。AVCaptionの埋め込みプレイヤーは、フックできるpostMessageイベントを発行します。
SCORM対応はどうなりますか? +
SCORMが必要なら、Teachable / Thinkific / Kajabiの標準フローを離れ、LearnDash、Moodle、LMS365の領域に入ります。外部動画の埋め込みは同じiframeパターンでそこでも動きます。
プラットフォームごとに埋め込みコードは違いますか? +
いいえ。同じiframeコード(`<iframe src="..." allow="..."></iframe>`)がTeachableのHTMLブロック、ThinkificのカスタムHTMLレッスン、KajabiのHTML要素のいずれでも動きます。違うのは挿入する側のUIだけです。
← content.back_to_index