웹사이트에 YouTube 동영상을 추가하려면 임베드(embed) 기능을 사용해야 합니다. HTML 페이지에 동영상을 삽입할 때는 <iframe> 요소를 활용하며, src 속성에 동영상의 URL을 지정합니다. 또한 동영상 플레이어가 화면에 적절한 크기로 표시되도록 width(너비)와 height(높이) 속성을 설정해 주어야 합니다.
임베드 링크를 얻는 방법
여기서 말하는 동영상 URL은 YouTube에서 제공하는 임베드 링크를 의미합니다. 임베드 링크를 얻으려면 먼저 삽입하고자 하는 YouTube 동영상 페이지로 이동한 뒤, 아래 이미지와 같이 [공유] → [퍼가기] 버튼을 클릭하면 됩니다. 그러면 다음과 같은 형태의 임베드 코드를 확인할 수 있습니다.
HTML 코드로 동영상 삽입하기
아래 예제 코드를 실행하면 HTML만으로 동영상을 웹페이지에 삽입하는 방법을 직접 확인할 수 있습니다. 위에서 설명한 방법으로 복사한 임베드 링크를 HTML 문서의 <iframe> 태그 안에 넣으면 완성됩니다.
예제 코드
<!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>
코드 설명
- width / height: 플레이어의 가로·세로 크기를 지정합니다. 일반적으로 560×315(16:9 비율)를 많이 사용합니다.
- src: 재생할 YouTube 동영상의 임베드 URL입니다. 일반 시청 URL 대신 반드시
/embed/형식의 링크를 사용해야 합니다. - allowfullscreen: 사용자가 전체 화면 모드로 동영상을 시청할 수 있도록 허용하는 옵션입니다.
이처럼 iframe 요소 하나만으로도 별도의 플러그인 없이 간단하게 YouTube 동영상을 웹사이트에 삽입할 수 있습니다.