프로젝트를 진행 중에 유튜브 영상을 하나 가져올 일이 있었다.
video 태그 사용해야지~ 하고 있던 찰나
유튜브에서 제공하는 가져오기 기능을 눌러보니
iframe 태그를 사용하는 것 아니겠는가.
둘의 차이는 무엇일까?

둘의 차이를 알아보는 것이므로, 태그의 세부적인 속성 설명은 생략하도록 하겠다.

video 태그

video 태그는 음향 설정, 재생, 중지, 세부 설정 등 다양한 옵션을 제공하고,
반복 재생 등의 기능을 구현할 수 있다.
또한 모바일, 태블릿 등 다양한 크기의 화면에서 반응형 크기를 가지도록 만들 수도 있다.

iframe 태그

iframe 태그는 비디오를 삽입하기 위한 태그는 아니다.
그저 이 태그(내 HTML)에 외부 웹페이지의 무엇인가를 삽입할 수 있게 해주는 것이다.
또한 삽입되는 소스를 가져온 곳에서의 크기에 의존적이기 때문에 반응형으로 만들기 힘들다.

결론

video 태그는 width나 height를 비율로 설정하면 반응형으로 만들 수 있다.

iframe 태그는 width나 height 중 하나만 비율로 설정 가능하며,
둘 다 입력할 경우 먼저 입력된 속성값을 따라고, 뒤에 나온 것은 무시된다.
따라서, 둘 중 하나는 px 단위로 만들어줘야한다.

참고 자료

참고 자료 1
참고 자료 2