
홈페이지등의 웹페이지에 유튜브 영상(YouTube)을 추가하는 방법을 알아보려고 합니다.
# YouTube(유튜브) 영상 웹페이지 추가, 사용하기
먼저 유튜브 영상을 추가하는 이유는 무엇일까요? 유튜브 콘텐츠를 웹페이지에 보여주기 위한 목적이 있을 수 있고 웹에서 백그라운드 배경을 이미지가 아닌 동영상으로 사용하기 위한 목적일 수도 있습니다.
- YouTube 컨텐트를 노출하기 위한 목적
- 백그라운드 배경 등의 사용 목적
이와 같은 이유로 YouTube 영상을 추가하려면? 이 경우 예전에는 embed 태그를 사용하였지만 최근에는 iframe 태그를 사용한 영상 추가 방법이 사용됩니다. 아래처럼 말이죠.
<iframe allowfullscreen src="youtubeEmbedURL" frameborder="0"></iframe>
위와 같이 코드를 추가하면 됩니다. 동일하게 iframe을 사용하되 필요한 어트리뷰트(attribute) 값으로 링크나 전체화면 허용등의 옵션을 맞게 설정하여 줍니다.
@ iframe에 사용할 어트리뷰트 정보
src // YouTube 주소
frameborder // YouTube를 표시할 때 외곽선 값
allowfullscreen // 전체화면을 허용할 것인지의 여부
여기서 YouTube의 주소의 경우 주소창의 값을 사용하지 않으니 주의하세요. Embed 방식으로 웹소스에 추가할 경우 YouTube에서 따로 Embed 코드를 제공합니다. 이 코드는 아래에서 가져올 수 있습니다.
- 1. YouTube에서 추가할 영상을 클릭
- 2. 하단 메뉴 중 Share(공유하기) 버튼을 클릭
- 3. 첫 번째 버튼인 Embed 버튼을 클릭
- 4. 나타나는 소스 코드를 복사하여 웹페이지에 붙여넣기
웹페이지에 추가하는 방법은 위의 과정을 순서대로 따라하시면 됩니다.
embed 영상의 경우 주소 뒤의 ID값은 동일하지만 주소 중간에 보면 /embed/라고 나타나있는 것을 확인할 수 있습니다.
! YouTube 영상 동적으로 추가하기
만약 상황에 따라 보여줄 영상이 다르게 선택되거나 바뀌어야 하는 경우라면? 이 경우 자바스크립트를 사용하여 영상을 변경할 수 있습니다. 즉 사용할 영상의 ID 값을 변경하면 되죠.
참고로 영상의 ID값은 배열로 저장해두면 더 편리합니다. 만약 3개의 영상이 웹사이트에서 사용된다면 각각 영상의 ID를 아래처럼 배열에 넣어두고 바꾸어가며 적용할 수 있을 것 입니다.
let iframeEle = document.querySelector('iframe');
let videoSrc = [
'Ez1mwz2QAUwwA8',
'Pb1YhzxdQGDFD8',
'yxdDv_LJ538Sm8'
];
iframeEle.src = 'https://www.youtube.com/embed/' + videoSrc[__index] + '?autoplay=1&mute=1';
let videoSrc = [
'Ez1mwz2QAUwwA8',
'Pb1YhzxdQGDFD8',
'yxdDv_LJ538Sm8'
];
iframeEle.src = 'https://www.youtube.com/embed/' + videoSrc[__index] + '?autoplay=1&mute=1';
코드를 살펴보면 document.querySelector()는 특정 DOM 엘리먼트를 선택할 수 있죠. 이를 변수에 저장하고 src 프로퍼티의 값을 변경하였습니다.
참고로 여기서 사용된 autoplay와 mute는 각각 자동 재생 기능과 음소거 기능을 의미합니다. 자동 재생의 경우 mute가 되지 않으면 동작하지 않을 수 있는 점 아시죠? 참고하시기 바랍니다.
아래는 YouTube 공식 웹사이트로 더 자세한 정보를 확인하실 수 있습니다.
YouTube API 개발자 링크 바로가기 >
https://developers.google.com/youtube/iframe_api_reference#Events
여기까지 웹사이트에 유투브 영상을 추가하는 방법을 알아보았습니다.
Author ByEnSSo
네. 도움이 되었어요
아니요. 별로에요