By aPOST in CSS — 2023년 12월 23일

HTML+CSS 기초 강의 - 10. <embed> 태그로 멀티미디어 컨텐츠를 연결하기

멀티미디어 컨텐츠를 HTML 문서에 배치하는 경우의 99%는 유튜브 동영상을 HTML 페이지에 붙이는 것입니다.

그 외에는 캔버스 태그(<canvas>)를 이용해 애니메이션이나 게임을 붙이는 것 정도입니다.

온세상이 유튜브 세상이다보니, 과거처럼 플래시나 실버라이트 같은 동적 컨텐츠를 페이지에 붙이는 것은 석기시대쯤의 일이 되어버렸습니다.

동영상, 특히 유튜브 동영상을 HTML 문서에 배치하는 방법은 <iframe></iframe> 태그를 사용하는 방법, <embed></embed> 태그를 사용하는 방법 2가지가 있습니다.

이중 가장 추천하는 방법은 <iframe> 태그를 사용하는 방법입니다.

표준이 아닐때도 대부분 브라우저들이 지원했기 때문에 사용하는데 아무런 문제는 없지만 유튜브에서 기본으로 제공하는 영상 링크가 iframe 으로 제공되기 때문에 iframe을 사용할 것을 추천합니다.

태그를 사용해 유튜브 동영상을 웹페이지에 연결하면 아래처럼 영상이 HTML문서에 붙게됩니다.(ifrme태그로 붙인 예)

보통은 iframe 이나 embed로 유튜브 영상을 붙일 때 기본적인 속성은 가로/세로 크기와 미디어 경로를 지정하는 정도면 됩니다.

유튜브에서 링크를 가져올 경우 아래처럼 몇가지 속성들이 더 붙어 있는 경우를 볼 수 있습니다.

몇몇 옵션은 모바일 기기 지원을 위한 속성들이므로 반응형 웹이나 모바일 웹을 지원해야할 경우 해당 옵션들을 넣어주는 것이 좋습니다.

유튜브 동영상 연결에 사용하는 전용 태그 속성들을 조금 더 자세히 살펴보겠습니다.

속성	값	설명
width	픽셀, %값으로 너비 지정 가능(100%면 웹브라우저 화면 전체 너비)
height	픽셀, %값으로 너비 지정 가능(100%면 웹브라우저 뷰포트 전체 높이)
src	동영상 경로 URL
frameborder	영상 테두리. 0또는 1만 가능 0이면 테두리 없음. 1이면 입체테두리 생성.	HTML5 표준에서 제외됨.
allow	accelerometer : 스마트폰같은 가속도센서 지원 기기에서 가로세로 전환 자동 지원 autoplay : 자동재생 지원. URL뒤에 "?autoplay=1" 을 추가로 붙여야 동작 encrypted-media : 암호화된 영상 재생 지원. picture-in-picture : 스마트폰에서 떠있는 작은화면으로 동영상 재생 지원	유튜브 전용 속성
allowfullscreen	allowfullscreen	속성이 있으면 풀화면 재생 버튼 활성화. 없으면 비활성화(또는 allowfullscreen="" 도 동일함)