모든 웹사이트에서 iframe으로 임베드된 동영상 다운로드하는 방법

iframe 임베드는 교차 출처 제한으로 인해 대부분의 다운로더를 중단시킵니다. 기본 동영상을 식별하여 MP4로 다운로드하는 방법을 알아보세요.

게시일 2026년 5월 6일

튜토리얼 사이트, 온라인 강의 플랫폼, 기업 교육 포털, 또는 블로그 글에서 동영상을 임베드하고 있습니다. 오프라인으로 보기 위해 저장하고 싶습니다. 다운로더 확장 프로그램을 설치하고… 아무것도 일어나지 않습니다. 다운로드 버튼이 나타나지 않습니다. 우클릭이 비활성화됩니다. DevTools의 네트워크 탭에서는 당신이 들어본 적 없는 도메인으로의 혼란스러운 요청이 표시됩니다.

문제는 거의 항상 같습니다. 동영상이 현재 페이지와 다른 출처의 <iframe> 내부에 있습니다. 브라우저 보안 규칙은 확장 프로그램과 JavaScript가 교차 출처 iframe에 도달하여 그 내용을 검사하거나 상호작용하는 것을 방지합니다. 이 가이드는 iframe 임베드가 왜 다른지, 기본 동영상을 식별하는 방법, 그리고 이들로부터 다운로드하는 세 가지 신뢰할 수 있는 방법을 설명합니다.

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를 로드합니다. 브라우저의 관점에서 이들은 완전히 별개의 문서입니다. 화면에 함께 렌더링되지만 동일 출처 정책으로 격리됩니다.

인기 있는 대부분의 동영상 임베드는 이런 식으로 작동합니다.

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을 새 탭에서 열기 (가장 간단함)

가장 신뢰할 수 있는 트릭:

임베드된 동영상을 우클릭 → 검사 (올바른 요소에서 DevTools가 열림)
DOM 패널에서 트리를 위로 보면서 <iframe> 요소를 찾습니다.
src 속성을 기록합니다. 이것이 iframe URL입니다.
그 URL을 새 탭에서 엽니다.

이제 iframe은 자체 탭의 최상위 문서입니다. 확장 프로그램이 이제 임베드의 출처에서 직접 활성 상태이기 때문에 교차 출처 제한이 사라집니다.

새 탭에서:

플레이어가 로드되고 동영상이 시작될 때까지 기다립니다.
확장 프로그램 아이콘을 클릭합니다.
화질을 선택하고 다운로드를 클릭합니다.

모든 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의 특정 추출기는 도움이 되지 않습니다.

경로:

iframe URL을 새 탭에서 열기 (방법 1)
DevTools → 네트워크 탭 열기
동영상을 재생하고 .m3u8, .mpd 또는 .mp4 요청을 찾습니다.
브라우저 확장 프로그램이 자동으로 감지해야 합니다. 감지하지 않으면 URL을 복사하고 FFmpeg를 사용합니다.

매니페스트 URL을 난독화하는 사이트 (드물지만 존재 — 특히 프리미엄 강의 플랫폼에서)의 경우 URL을 구성하는 방식을 찾기 위해 iframe의 JavaScript를 읽어야 할 수도 있습니다. 이것은 드물다. 대부분의 iframe 동영상 플레이어는 표준 HLS 또는 DASH URL을 사용합니다.

일반적인 질문

왜 내 다운로더가 임베드된 동영상이 있는 페이지에 버튼을 표시하지 않습니까?

동영상이 교차 출처 iframe에 있고 확장 프로그램이 접근 권한이 없기 때문입니다. iframe URL을 새 탭에서 열기 (우클릭 → 검사 → iframe src 찾기).

확장 프로그램이 모든 iframe을 읽을 권한을 요청할 수 있습니까?

<all_urls> 호스트 권한을 요청할 수 있으며, 이를 통해 출처와 관계없이 모든 iframe에 콘텐츠 스크립트를 주입할 수 있습니다. 우리는 의도적으로 이렇게 하지 않습니다. 이유:

이것은 개인 정보 보호 문제입니다. 많은 사용자 (정당하게) 해당 권한으로 확장 프로그램 설치를 거부합니다.
Chrome Web Store는 광범위한 권한 확장 프로그램을 추가 검토를 위해 플래그합니다.
“새 탭에서 열기” 워크플로우는 거의 동일하게 빠르며 권한 프롬프트를 피합니다.

확장 프로그램은 대신 activeTab (사용자가 클릭할 때만 현재 탭)을 요청하고 iframe이 있을 때 iframe 감지 흐름을 제공합니다.

왜 우클릭 → 동영상으로 저장하기가 일부 임베드에서는 작동하지만 다른 것에서는 작동하지 않습니까?

임베드가 <video src="..."> 속성 (blob URL 아님, MSE-fed 아님)을 통해 단일 점진적 MP4 파일을 제공할 때 브라우저의 기본 컨텍스트 메뉴가 저장할 수 있습니다. 이것은 점점 드물어지고 있습니다. 대부분의 현대 임베드는 blob URL을 생성하는 HLS 또는 DASH를 사용합니다. blob URL을 그렇게 저장할 수 없는 이유는 How to Download Blob Videos in Chrome를 참조하세요.

iframe이 로그인 벽 뒤의 페이지에 있으면 어떻게 됩니까?

동일한 기술이 작동합니다. 브라우저 세션은 상위 탭의 세션입니다. 하지만 iframe URL을 새 탭에서 열 때 새 탭은 임베드 제공자 도메인에 대해 동일한 세션을 상속합니다. 임베드 제공자가 당신을 인증된 것으로 간주하는 한 (예: 액세스 권한이 있는 유료 Vimeo Showcase) 다운로드가 작동합니다.

중첩된 iframe이 문제입니까?

때때로 — 사이트가 iframe을 임베드하는데 그 자체에 iframe이 포함됩니다. 실제로 동영상 요소를 포함하는 최하단 iframe에 도달할 때까지 “우클릭 → 검사 → iframe src 찾기” 프로세스를 반복하십시오. 방법 3 (yt-dlp)은 많은 경우에 중첩된 iframe을 자동으로 처리합니다.

iframe 임베드 동영상을 페이지에서 프로그래밍 방식으로 감지할 수 있습니까?

네 — 방법 2의 JavaScript 스니펫은 모든 iframe을 나열합니다. 알려진 동영상 제공자 도메인으로 필터링합니다. 확장 프로그램은 백그라운드에서 자동으로 수행하고 동영상을 포함하는 iframe을 감지하면 알림을 표시합니다.

비교

상황	최고의 방법
튜토리얼 블로그의 단일 동영상	iframe URL을 새 탭에서 열기 → 확장 프로그램
임베드된 동영상이 많은 페이지	상위 페이지 URL에서 yt-dlp 실행
사용자 정의 (비표준) 임베드	DevTools 네트워크 + 확장 프로그램 또는 FFmpeg
도메인 제한 임베드	yt-dlp가 때때로 작동. 그렇지 않으면 원본 사이트 사용

결론

iframe 임베드는 악의 때문이 아니라 브라우저 보안의 기초인 동일 출처 정책 때문에 대부분의 다운로더를 중단시킵니다. 해결책은 iframe URL을 자체 탭에서 열어서 교차 출처 제한이 더 이상 적용되지 않도록 하는 것입니다.

Video Downloader One-for-All을 설치하세요 — iframe을 감지하고 워크플로우가 원활하게 유지되도록 원클릭 “새 탭에서 열기” 작업을 제공합니다. Vimeo의 경우 (가장 일반적인 iframe 임베드 소스) How to Download Vimeo Videos를 참조하세요. 임베드가 blob URL을 사용할 때는 How to Download Blob Videos in Chrome를 참조하세요.