[HTML] video vs iframe, 어떤 것이 더 적합할까?

웹 페이지에서 동영상 콘텐츠를 삽입할 때, HTML 태그 중 video와 iframe을 주로 사용합니다.

그러나 이 두 가지 태그는 어떤 차이점이 있을까요? 어떤 것이 더 적합한 선택일까요?

이번에는 video와 iframe의 특징과 장단점에 대해 살펴보겠습니다.

 

 

video 태그

video 태그는 HTML5에서 새롭게 등장한 태그로, 웹 페이지에 비디오를 삽입할 때 사용됩니다.

video 태그는 다양한 속성을 사용하여 비디오의 플레이백, 사이즈, 컨트롤 등을 조작할 수 있습니다.

 

문법

<video width="640" height="360" controls autoplay loop muted poster="videoThumnail.jpg">
  <source src="videoName.mp4" type="video/mp4">
  <source src="videoName.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

mp4와 webm 형식의 비디오 파일을 지원하며, 비디오가 로드되지 않을 경우 "Your browser does not support the video tag."라는 메시지를 표시합니다.

 

video 태그 주요 속성

video 태그에는 다음과 같은 속성을 사용할 수 있습니다.

• width, height: 비디오의 너비와 높이를 지정합니다. px 단위입니다.
• controls: 컨트롤러를 표시합니다. 이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.
• autoplay: 페이지가 로드될 때 자동으로 재생합니다. boolean 속성
• loop: 비디오가 끝까지 재생된 후 자동으로 다시 시작합니다. boolean 속성
• muted: 음소거 상태로 재생합니다. 기본값은 false입니다. boolean 속성
• poster: 비디오가 로드되기 전에 표시되는 이미지를 지정합니다.
• src: 비디오 파일의 경로를 지정합니다. 또한, source 태그를 사용하여 비디오 파일의 소스를 지정할 수 있습니다. 
• type: 비디오 파일의 형식을 지정합니다.

 

iframe 태그

iframe 태그는 다른 웹 페이지의 컨텐츠를 삽입할 때 사용됩니다.

 

문법

<iframe width="560" height="315" src="https://www.youtube.com/embed/{유튜브 동영상의 고유 ID}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

iframe 주요 속성

iframe 태그에는 다음과 같은 속성을 사용할 수 있습니다.

• src: iframe이 포함할 문서의 URL을 지정합니다.
• width, height: iframe의 너비와 높이를 지정합니다. px 단위입니다.
• frameborder: iframe 주위에 경계선을 표시할지 여부를 지정합니다. 0은 경계선을 표시하지 않음을 의미합니다.
• scrolling: iframe 내에서 스크롤링이 가능한지 여부를 지정합니다. yes는 스크롤링을 허용하고, no는 스크롤링을 허용하지 않습니다.
• allowfullscreen: iframe 내에서 전체화면 모드를 사용할 수 있는지 여부를 지정합니다.
• title: 웹접근성을 위해 제목을 지정할 수 있습니다.

 

어떤 것이 더 적합한 선택일까?

video와 iframe은 모두 HTML에서 웹 페이지에 다른 콘텐츠를 삽입하는 방법입니다.

하지만 video는 동영상 자체를 웹 페이지에 삽입하는 반면, iframe은 다른 웹 페이지나 독립적인 HTML 파일을 웹 페이지에 삽입합니다.

 

video 요소는 여러 가지 비디오 포맷을 지원하기 때문에, 일반적으로 웹 페이지에 로컬에 저장된 비디오 파일을 삽입할 때 사용됩니다. 

또 다양한 속성을 설정하여 비디오의 플레이백, 사이즈, 컨트롤 등을 조작할 수 있습니다.

video 요소를 사용하면, 로컬에 저장된 비디오 파일 뿐 아니라 웹 상의 비디오도 쉽게 삽입할 수 있습니다.

 

반면에, iframe은 다른 웹 페이지를 삽입하기 위해 사용되는 HTML 태그입니다.

iframe 요소는 src 속성을 사용하여 삽입할 웹 페이지의 URL을 지정할 수 있습니다.

iframe을 사용하면, 다른 웹 페이지를 쉽게 삽입하여 이를 활용할 수 있습니다. 예를 들어, 다른 웹 페이지에서 제공하는 지도, 동영상, 뉴스 등을 웹 페이지 내에서 보여줄 수 있습니다.

참고로 vimeo나 youtube 동영상을 웹 페이지에 삽입하려면, video 요소를 사용하는 대신 iframe 요소를 사용해야 접근이 가능합니다.

iframe은 웹 페이지의 성능을 느리게 할 수 있으며, 보안 이슈도 발생할 수 있습니다. 따라서, iframe 요소를 사용할 때는 이러한 문제들을 고려하여 적절한 사용이 필요합니다. 

 

 

 

 

이렇게 video vs iframe, 어떤 것이 더 적합할까?에 대해서 탐구해 봤습니다.

 

 

 

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법