개요
YouTube에 업로드된 동영상은 간단한 임베드(삽입) 작업만으로 HTML 웹 페이지에 손쉽게 추가할 수 있습니다. 이 글에서는 동영상 ID를 확인하는 방법부터 <iframe> 태그와 <embed> 태그를 활용해 동영상을 삽입하는 과정까지 예제와 함께 단계별로 살펴봅니다.
1단계: 동영상 ID 확인하기
동영상을 삽입하려면 먼저 해당 동영상의 고유 ID를 알아야 합니다.
1단계: 원하는 동영상 페이지로 이동한 뒤, 동영상 위에서 마우스 오른쪽 버튼을 클릭하고 "Stats for nerds"(통계 정보) 메뉴를 선택합니다.
메뉴를 클릭하면 아래와 같이 동영상의 상세 통계 정보를 보여주는 대화 상자가 나타납니다.
대화 상자에서 확인할 수 있듯이, 이 동영상의 ID는 F6m0ghjadlw입니다. 이제 이 ID를 활용해 동영상을 웹 페이지에 직접 삽입해 보겠습니다.
방법 1: <iframe> 태그로 동영상 삽입하기
<iframe> 태그는 외부 콘텐츠를 현재 문서 안에 불러오는 가장 널리 사용되는 방식입니다. YouTube의 공식 임베드 URL인 https://www.youtube.com/embed/동영상ID를 src 속성에 지정하기만 하면 됩니다.
예제
<!DOCTYPE html> <html> <head> <title>Learn WordPress</title> </head> <body> <h1>WordPress Installation</h1> <p>XAMPP 서버를 이용해 localhost에 WordPress를 설치하는 과정을 담은 동영상입니다:</p> <iframe height="350" width="600" src="https://www.youtube.com/embed/F6m0ghjadlw"> </iframe> </body> </html>
실행 결과
아래 실행 결과를 통해 YouTube 동영상이 웹 페이지에 성공적으로 삽입된 것을 확인할 수 있습니다.
방법 2: <embed> 태그로 동영상 삽입하기
<embed> 태그를 사용해서도 동일한 결과를 얻을 수 있습니다. 다음은 <embed> 요소를 활용해 동영상을 삽입한 HTML 코드입니다.
예제
<!DOCTYPE html> <html> <head> <title>Learn WordPress</title> </head> <body> <h1>WordPress Installation</h1> <p>XAMPP 서버를 이용해 localhost에 WordPress를 설치하는 과정을 담은 동영상입니다(embed 요소로 삽입):</p> <embed height="350" width="600" src="https://www.youtube.com/embed/F6m0ghjadlw"> </body> </html>
실행 결과
동영상이 성공적으로 삽입되어 웹 페이지에서 정상적으로 재생되는 모습을 확인할 수 있습니다.
마무리
지금까지 YouTube 동영상의 ID를 확인하고, <iframe> 태그와 <embed> 태그 두 가지 방법으로 웹 페이지에 동영상을 삽입하는 방법을 알아보았습니다. 실무에서는 브라우저 호환성과 유지보수 측면에서 <iframe> 태그 사용이 더욱 권장됩니다. 또한 width, height 속성 값을 조절해 동영상 크기를 자유롭게 설정할 수 있다는 점도 기억해 두세요.