<video> 태그와 <iframe> 태그는 HTML에서 멀티미디어와 외부 콘텐츠를 삽입하기 위해 사용되지만, 용도와 동작 방식이 다르다. 아래는 두 태그의 주요 차이점이다.
1. 용도
| 태그 | 용도 |
|---|
<video> | HTML5에서 비디오 파일을 직접 삽입하고 재생하기 위해 사용된다. |
<iframe> | 외부 웹페이지, 콘텐츠, 또는 비디오(예: YouTube)를 삽입하기 위해 사용된다. |
2. 비디오 삽입 방식
| 특징 | <video> | <iframe> |
|---|
| 소스 | 로컬 또는 외부 비디오 파일(.mp4, .webm, .ogg 등) | 외부 웹페이지 URL을 지정하여 콘텐츠를 불러온다. |
| 직접 재생 | 브라우저가 비디오를 직접 재생한다. | 외부 콘텐츠에 의존(비디오 플레이어 포함). |
| 지원되는 형식 | HTML5 지원 형식만 사용 가능하다. | 임베드된 서비스가 제공하는 형식 사용 가능하다. |
3. 코드 구조
<video> 태그 예제:
<video controls width="600">
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<iframe> 태그 예제:
<iframe
width="600"
height="400"
src="https://www.youtube.com/embed/O_hKC3gRvzw"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
4. 사용 시 장단점
| 특징 | <video> | <iframe> |
|---|
| 사용성 | HTML5에서 직접 비디오 파일을 삽입하고 제어한다. | 외부 플랫폼의 플레이어를 그대로 사용 가능하다(예: YouTube, Vimeo). |
| 유연성 | 비디오를 직접 호스팅하거나 제어 가능하다(예: 시작 시간, 속도 등). | 외부 콘텐츠에 의존하며, 삽입된 플레이어 기능에 제한이 있다. |
| 성능 | 비디오 파일을 직접 로드하므로 서버 리소스를 사용한다. | 외부 콘텐츠를 iframe으로 불러오므로, 비디오 로드가 외부 서비스에 의존한다. |
| 커스터마이징 | 완전히 커스터마이징 가능하다(브라우저 기본 컨트롤 또는 JavaScript로 제어). | 외부 플랫폼이 제공하는 기능만 사용 가능하다. |
| CORS 문제 | 외부 도메인에서 비디오 파일을 로드하면 CORS 문제 가능성이 있다. | 외부 콘텐츠는 해당 플랫폼에서 제공하는 임베드 URL만 사용 가능하다. |
5. 어떤 상황에서 사용해야 할까?
| 상황 | 태그 |
|---|
| 직접 업로드한 비디오 파일을 삽입하고 커스터마이징 제어를 하고 싶을 때. | <video> |
| 외부 비디오 플랫폼(YouTube, Vimeo 등)의 콘텐츠를 삽입하고 해당 플랫폼의 플레이어를 사용할 때. | <iframe> |
| 외부 서비스에서 제공하는 동적 콘텐츠를 삽입하고 싶을 때(예: 외부 웹사이트, 지도 등). | <iframe> |
요약
<video>: 비디오 파일을 직접 삽입하고 브라우저 내에서 처리 및 재생.<iframe>: 외부 콘텐츠(웹페이지, 동영상 플레이어 등)를 포함하는 용도로 사용.
