웹페이지에 동영상을 삽입하려면 HTML의 <iframe> 요소를 사용합니다. src 속성에 동영상의 URL(임베드 링크)을 지정하고, width와 height 속성으로 플레이어의 가로·세로 크기를 적절하게 설정하면 됩니다.
임베드 링크란 무엇인가요?
동영상 URL은 해당 동영상을 외부 사이트에서 바로 재생할 수 있도록 제공되는 '임베드(embed) 링크'를 의미합니다. 이 글에서는 가장 널리 사용되는 유튜브(YouTube) 동영상을 예시로 들어 설명합니다.
유튜브 임베드 링크 얻는 방법
유튜브에서 원하는 동영상 페이지로 이동한 뒤, 영상 아래의 공유 버튼을 클릭하고 퍼가기(Embed) 옵션을 선택하세요. 그러면 아래 이미지와 같이 임베드용 링크가 표시됩니다.
여기서 표시된 임베드 링크를 복사한 후, HTML 문서에 그대로 붙여넣으면 됩니다. 아래 예제 코드를 직접 실행해 보면서 HTML만으로 동영상을 삽입하는 과정을 익혀 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>HTML Video embed</title>
</head>
<body>
<p>Learn Eclipse</p>
<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/y881t8ilMyc" frameborder="0" allowfullscreen></iframe>
</body>
</html>
실전 활용 팁
allowfullscreen속성을 추가하면 시청자가 전체 화면 모드로 동영상을 감상할 수 있습니다.- 반응형 웹사이트라면 CSS로
max-width: 100%를 설정해 모바일 기기에서도 플레이어가 화면에 맞게 조절되도록 하는 것이 좋습니다. - 페이지 로딩 속도를 개선하려면
loading='lazy'속성을 함께 사용해 화면에 보일 때 동영상을 불러오도록 최적화할 수 있습니다.