← ブログに戻る

任意のウェブサイトからiframe埋め込み動画をダウンロードする方法

iframe埋め込みはオリジン間制限により多くのダウンローダーが機能しません。基盤となる動画を特定してMP4でダウンロードする方法を紹介します。

チュートリアルサイト、オンラインコースプラットフォーム、企業研修ポータル、ブログ記事が動画を埋め込んでいます。オフライン視聴のために保存したいと考えます。ダウンローダー拡張をインストールして…何も起こりません。ダウンロードボタンが表示されません。右クリックが無効です。DevToolsのNetworkタブには、聞いたことのないドメインへの理解しがたいリクエストが表示されます。

問題はほぼいつも同じです。動画は、あなたが閲覧しているページとは異なるオリジンの<iframe>の中にあります。ブラウザセキュリティ規則により、拡張機能とJavaScriptはオリジン間の iframe にアクセスしてその内容を検査または操作することができません。このガイドでは、iframe埋め込みがなぜ異なるのか、基盤となる動画を特定する方法、そして3つの信頼性の高いダウンロード方法を説明します。

iframe埋め込みが実際には何であるか

<iframe>はウィンドウ内のウィンドウです。親ページ内に完全に独立したウェブページを読み込むHTMLエレメントです。親ページはiframeのURL（src属性）を指定できますが、iframeが異なるドメインから読み込まれている場合、iframeの内容を読み取ったり変更したりすることはできません。

チュートリアルブログ上のVimeo埋め込みは、HTMLでは通常このような形式です。

<iframe
  src="https://player.vimeo.com/video/123456789?h=abc123def"
  width="640"
  height="360"
  allow="autoplay; fullscreen"
  allowfullscreen>
</iframe>

ブログページは例えばtutorialsite.com/article-about-xにあります。iframeはplayer.vimeo.com/video/123456789を読み込みます。ブラウザの視点からすると、これらは2つの完全に独立したドキュメントです。画面上で一緒にレンダリングされていますが、同一オリジンポリシーで隔離されています。

最も人気のある動画埋め込みはこのように機能します。

  • Vimeo: player.vimeo.com/video/{id}
  • YouTube: youtube.com/embed/{id}（文脈のみ言及 — Chrome Web Store方針により、YouTubeダウンロードは対応していません）
  • Wistia: fast.wistia.com/embed/iframe/{id}
  • Loom: loom.com/embed/{id}
  • Bunny Stream: iframe.mediadelivery.net/embed/{lib}/{id}
  • Cloudflare Stream: iframe.videodelivery.net/{uid}
  • JW Player: cdn.jwplayer.com/players/{id}
  • Brightcove: players.brightcove.net/{account}/{player}_{video}/index.html

同一オリジンポリシーが問題である理由

「タブで有効」なブラウザ拡張機能は、そのタブのメインドキュメントのイベントとDOMのみを見ます。オリジン間iframeは独自のドキュメントで独自のオリジンです。拡張機能はできません。

  • iframe内の<video>エレメントを検査する
  • iframe由来のネットワークリクエストをリッスンする（<all_urls>パーミッションなし、ほとんどの拡張機能が要求しません）
  • iframeのURLパラメータまたは認証状態を読み取る

結果として、Vimeoに直接訪問した場合に完璧に機能する拡張機能が、ブログに埋め込まれた同じVimeo動画を検出できません。

方法1: iframeを新しいタブで開く（最もシンプル）

最も信頼性の高いトリック：

  1. 埋め込み動画を右クリック → 検査（Chrome DevToolsが正しいエレメントで開きます）
  2. DOMパネルでツリーを上に辿り、<iframe>エレメントを探す
  3. src属性に注目 — これはiframeのURL
  4. そのURLを新しいタブで開く

これでiframeは独自のタブの最上位ドキュメントになります。拡張機能は埋め込みのオリジンで直接有効になるため、オリジン間制限が消えます。

新しいタブで：

  1. プレーヤーが読み込まれ動画が開始されるまで待機
  2. 拡張機能アイコンをクリック
  3. 品質を選択してダウンロードをクリック

これは拡張機能パーミッションアップグレードを必要としない、すべてのiframe埋め込み動画に対応できるため、最も推奨されるワークフローです。

Video Downloader One-for-Allはこのワークフローを通じてiframe埋め込みにシームレスに対応しています。拡張機能はまた現在のページでiframeが検出されたときフラグを立て、DevToolsを掘り下げる必要がないように「埋め込みを新しいタブで開く」ワンクリックアクションを提供します。

方法2: iframeのURLをプログラムで検出

ページに複数の埋め込み動画があり、検出をスクリプト化したい場合：

// ページのDevToolsコンソールで実行
document.querySelectorAll('iframe').forEach((f, i) => {
  console.log(`${i}: ${f.src}`);
});

これはページ上のすべてのiframeをそのソースURLとともにリストアップします。認識できる埋め込みプロバイダーでフィルタリング：

document.querySelectorAll('iframe').forEach(f => {
  if (f.src.includes('vimeo') || f.src.includes('wistia') || f.src.includes('jwplayer')) {
    console.log(f.src);
  }
});

各URLを新しいタブで開き、方法1のようにダウンロードします。

方法3: 親ページURLでyt-dlpを実行

yt-dlpには、ほとんどのポピュラーなiframe埋め込みプロバイダーを含むエクストラクタリストがあります。親ページURLを渡すと、yt-dlpはページをiframe埋め込みでスキャンし、基盤となる動画を解決してダウンロードします。

yt-dlp "https://tutorialsite.com/article-about-x"

親ページに複数の動画がある場合、yt-dlpはどちらかを選択するように促すか、すべてをダウンロードします（バージョンとフラグによります）。すべてをダウンロードするには：

yt-dlp --no-playlist --yes-playlist "https://tutorialsite.com/page-with-multiple-videos"

yt-dlpが埋め込みプロバイダーを認識しない場合、ジェネリックエクストラクタにフォールバックし、ページHTMLとJavaScriptで.m3u8、.mpd、.mp4 URLをスキャンします。ヒット率はさまざま — ほとんどの埋め込みで動作しますが、いくつかのカスタム難読化されたものでは失敗します。

埋め込みが「お客様の地域ではご利用いただけません」と表示される場合がある理由

いくつかのiframe埋め込みはドメイン制限を設定しています。埋め込みは特定の親ドメインでのみ再生されます。埋め込みのiframe URLを新しいタブで直接開くと、埋め込みは新しいタブのオリジン（埋め込みプロバイダーのドメイン自体）を親として見ます。

ほとんどの埋め込みプロバイダー（Vimeo、JW Player、Brightcove）の場合、これで問題ありません — 埋め込みURLを直接開くと、親がないときドメイン制限が解除されるため機能します。

いくつかのより厳格なセットアップでは、埋め込みは再生を拒否する可能性があります。そのような場合：

  • 埋め込みはセキュリティ対策として元のドメインを強制しています
  • この制限を回避することは、一般的に埋め込み作成者の意図に反しています
  • 解決策は提供していません

埋め込みが親コンテキストで再生されるが、直接開くときは再生されない場合、この制限にぶつかっています。方法3（親URLでyt-dlpを実行）は時々機能します。yt-dlpは埋め込みメタデータをサーバー側で解析し、時々iframe全体をバイパスするCDN URLを抽出できるためです。

カスタムビデオプレーヤーiframe（認識されるプロバイダーなし）

いくつかのサイトは独自のビデオプレーヤーを構築し、独自のドメインからiframe経由で埋め込みます（例えば、cdn.example.com/player/{id}）。これらはエクストラクタの既知パターンと一致しないため、yt-dlpの特定エクストラクタは役に立ちません。

パス：

  1. iframeのURLを新しいタブで開く（方法1）
  2. DevTools → Networkタブを開く
  3. 動画を再生し、.m3u8、.mpd、または.mp4リクエストを探す
  4. ブラウザ拡張機能は自動的にそれを検出すべきです。そうでない場合、URLをコピーしてFFmpegを使用します

マニフェストURLを難読化するサイト（珍しいですが存在 — 特にプレミアムコースプラットフォーム）の場合、iframeのJavaScriptを読んでURLを構築する場所を見つけなければならないかもしれません。これは珍しいです。ほとんどのiframeビデオプレーヤーは標準的なHLSまたはDASH URLを使用します。

よくある質問

なぜダウンローダーは埋め込み動画のあるページにボタンを表示しませんか？

なぜなら、動画はオリジン間iframeにあり、拡張機能はアクセスできないからです。iframeのURLを新しいタブで開きます（右クリック → 検査 → iframe srcを見つける）。

拡張機能はすべてのiframesを読み取る権限をリクエストできませんか？

<all_urls>ホストパーミッションをリクエストできます。これにより、オリジン間に関わらず、すべてのiframeにコンテンツスクリプトを注入できるようになります。わたしたちはこれを意図的に行いません。理由は：

  1. プライバシーの赤信号 — 多くのユーザー（正当に）そのパーミッションを持つ拡張機能のインストールを拒否します
  2. Chrome Web Storeは広いパーミッションを持つ拡張機能に追加レビューのフラグを立てます
  3. 「新しいタブで開く」ワークフローはほぼ同じくらい高速で、パーミッション求めを避けられます

代わりに拡張機能はactiveTab（ユーザーがクリックしたときのみ現在のタブ）をリクエストし、iframesが存在するときiframe検出フローを提供します。

なぜ右クリック → 動画を保存はいくつかの埋め込みでは機能しますが他では機能しませんか？

埋め込みが単一のプログレッシブMP4ファイルを<video src="..."> 属性経由で提供する場合（blobなしURL、MSE供給なし）、ブラウザのネイティブコンテキストメニューはそれを保存できます。これはますます珍しくなっています。ほとんどの最新の埋め込みはHLSまたはDASHを使用していてblobへのURLを生成します — blob URLが保存できない理由についてはChrome のBlob動画をダウンロードする方法を参照してください。

iframeがログインウォールの背後にあるページにある場合はどうなりますか？

同じテクニックが機能します — ブラウザセッションは親タブのセッションですが、新しいタブでiframe URLを開くと、新しいタブは埋め込みプロバイダーのドメインに対して同じセッションを継承します。埋め込みプロバイダーがあなたを認証ユーザーとして見ている限り（例えば、アクセス権のある有料Vimeo Showcaseなど）、ダウンロードは機能します。

ネストされたiframesは問題ですか？

時々 — サイトはiframe自体がiframeを含むiframeを埋め込みます。「右クリック → 検査 → iframe srcを見つける」プロセスを反復的に繰り返します。実際にビデオエレメントを含む最も下のiframeに到達するまで。方法3（yt-dlp）は多くの場合、ネストされたiframesを自動的に処理します。

ページ上の iframe 埋め込み動画をプログラムで検出できますか？

はい — 方法2のJavaScriptスニペットはすべてのiframesをリストアップします。既知のビデオプロバイダードメインでフィルタリング。拡張機能はバックグラウンドでこれを自動的に行い、ビデオを含むiframesを検出したときの通知を表示します。

比較

状況最良の方法
チュートリアルブログの単一の動画iframe URLを新しいタブで開く → 拡張機能
多くの埋め込み動画のあるページ親ページURLでyt-dlpを実行
カスタム（非標準）埋め込みDevTools Network + 拡張機能またはFFmpeg
ドメイン制限された埋め込み時々yt-dlp。そうでなければ元のサイトを使用

結論

iframe埋め込みは悪意のためではなく、ブラウザセキュリティの基本である同一オリジンポリシーのために、ほとんどのダウンローダーを壊します。解決策は、iframeのURLをそれ独自のタブで開くことです。そこではオリジン間制限は適用されなくなります。

Video Downloader One-for-Allをインストール — iframesを検出し、「新しいタブで開く」ワンクリックアクションを提供するため、ワークフローがシームレスに保たれます。Vimeo特に（最も一般的なiframe埋め込みソース）については、Vimeo動画をダウンロードする方法を参照してください。埋め込みがblobなしURLを使用する場合については、Chromeでblob動画をダウンロードする方法を参照してください。