웹페이지에 유투브(Youtube) 영상 추가하는 방법, iframe

홈페이지등의 웹페이지에 유튜브 영상(YouTube)을 추가하는 방법을 알아보려고 합니다.




# YouTube(유튜브) 영상 웹페이지 추가, 사용하기
먼저 유튜브 영상을 추가하는 이유는 무엇일까요? 유튜브 콘텐츠를 웹페이지에 보여주기 위한 목적이 있을 수 있고 웹에서 백그라운드 배경을 이미지가 아닌 동영상으로 사용하기 위한 목적일 수도 있습니다.

- YouTube 컨텐트를 노출하기 위한 목적
- 백그라운드 배경 등의 사용 목적

이와 같은 이유로 YouTube 영상을 추가하려면? 이 경우 예전에는 embed 태그를 사용하였지만 최근에는 iframe 태그를 사용한 영상 추가 방법이 사용됩니다. 아래처럼 말이죠.

위와 같이 코드를 추가하면 됩니다. 동일하게 iframe을 사용하되 필요한 어트리뷰트(attribute) 값으로 링크나 전체화면 허용등의 옵션을 맞게 설정하여 줍니다.


@ iframe에 사용할 어트리뷰트 정보
src // YouTube 주소
frameborder // YouTube를 표시할 때 외곽선 값
allowfullscreen // 전체화면을 허용할 것인지의 여부

여기서 YouTube의 주소의 경우 주소창의 값을 사용하지 않으니 주의하세요. Embed 방식으로 웹소스에 추가할 경우 YouTube에서 따로 Embed 코드를 제공합니다. 이 코드는 아래에서 가져올 수 있습니다.

• 1. YouTube에서 추가할 영상을 클릭
• 2. 하단 메뉴 중 Share(공유하기) 버튼을 클릭
• 3. 첫 번째 버튼인 Embed 버튼을 클릭
• 4. 나타나는 소스 코드를 복사하여 웹페이지에 붙여넣기

웹페이지에 추가하는 방법은 위의 과정을 순서대로 따라하시면 됩니다.

스크린샷) YouTube 영상에서 Share 버튼을 클릭시 화면

embed 영상의 경우 주소 뒤의 ID값은 동일하지만 주소 중간에 보면 /embed/라고 나타나있는 것을 확인할 수 있습니다.


! YouTube 영상 동적으로 추가하기
만약 상황에 따라 보여줄 영상이 다르게 선택되거나 바뀌어야 하는 경우라면? 이 경우 자바스크립트를 사용하여 영상을 변경할 수 있습니다. 즉 사용할 영상의 ID 값을 변경하면 되죠.

참고로 영상의 ID값은 배열로 저장해두면 더 편리합니다. 만약 3개의 영상이 웹사이트에서 사용된다면 각각 영상의 ID를 아래처럼 배열에 넣어두고 바꾸어가며 적용할 수 있을 것 입니다.

코드를 살펴보면 document.querySelector()는 특정 DOM 엘리먼트를 선택할 수 있죠. 이를 변수에 저장하고 src 프로퍼티의 값을 변경하였습니다.

참고로 여기서 사용된 autoplay와 mute는 각각 자동 재생 기능과 음소거 기능을 의미합니다. 자동 재생의 경우 mute가 되지 않으면 동작하지 않을 수 있는 점 아시죠? 참고하시기 바랍니다.

아래는 YouTube 공식 웹사이트로 더 자세한 정보를 확인하실 수 있습니다.

YouTube API 개발자 링크 바로가기 >
https://developers.google.com/youtube/iframe_api_reference#Events

여기까지 웹사이트에 유투브 영상을 추가하는 방법을 알아보았습니다.