유튜브 영상을 내 사이트에 삽입하는 방법은 2가지가 있다.
(URL 링크 클릭해서 유튜브로 페이지 이동을 하는 게 아니라 영상을 내 웹사이트 그 자리에서 바로 재생해서 볼 수 있도록 하는!)
[유튜브 iframe api 공식문서]
https://developers.google.com/youtube/iframe_api_reference
1. 영상 퍼가기
- 삽입하고자 하는 영상을 공유하기 버튼을 클릭하여 iframe 태그를 임베드(embed) 하는 방법.
- 해당 영상 > 공유하기 버튼 > 퍼가기 버튼 > HTML 태그 복사 > 원하는 곳에 붙여넣기
- 코드에 파라미터를 추가적으로 덧붙여서 자동재생, 음소거, 동영상 재생 목록, 재생 반복여부 등등의 기능을 설정할 수 있다.
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/영상아이디"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>- 플레이어 매개변수
- 사용방법 : <iframe src="https://www.youtube.com/embed/영상아이디"> 에서 영상아이디 뒤에 덧붙인다.
- 예) 매개변수 중 autoplay(자동재생)를 추가하면 다음과 같다. ?autoplay=1 이 추가됨
<iframe src="https://www.youtube.com/embed/영상주소?autoplay=1"></iframe> - 이 외에도 다양한 매개변수가 있으니, 자세한 건 유튜브 공식문서 참고.
- 주의사항
- autoplay(자동재생)은 반드시 mute=1 (음소거)와 함께 덧붙여야 정상적으로 작동된다.
- 그러나 mute=1과 같이 작성했더라도 모바일(android,iOS)에서는 제대로 작동하지 않는다. 이럴 경우엔 2번째 방법을 사용해야 한다.
2. youtube iframe API
- 1번의 방법보다 좀 더 심화되고 다양하게 이벤트 컨트롤이 가능한 API
- HTML 구조에는 영상이 삽입될 영역만 확보하고, 그 확보된 영역에 스크립트를 이용하여 영상을 불러와 노출 및 재생시킨다.
- 무서워할 것 없다. 공식문서 보고 엄청 쫄았는데, 찬찬히 살펴보면 slick처럼 사용방법 어렵지 않다! 쫄지말자
<!DOCTYPE html>
<html>
<body>
<!-- 1. 영상이 노출될 영역을 확보한다.
api가 제대로 작동하면 <div>에 자동으로 <iframe> 태그가 load될 것 이다. -->
<div id="player"></div>
<script>
// 2. 이 코드는 Iframe Player API를 비동기적으로 로드한다. !!필수!!
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. API 코드를 다운로드 받은 다음에 <iframe>을 생성하는 기능 (youtube player도 더불어)
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360', //변경가능-영상 높이
width: '640', //변경가능-영상 너비
videoId: 'M7lc1UVf-VE', //변경-영상ID
playerVars: {
'rel': 0, //연관동영상 표시여부(0:표시안함)
'controls': 0, //플레이어 컨트롤러 표시여부(0:표시안함)
'autoplay' : 1, //자동재생 여부(1:자동재생 함, mute와 함께 설정)
'mute' : 1, //음소거여부(1:음소거 함)
'loop' : 1, //반복재생여부(1:반복재생 함)
'playsinline' : 1 //iOS환경에서 전체화면으로 재생하지 않게
'playlist' : 'M7lc1UVf-VE' //재생할 영상 리스트
},
events: {
'onReady': onPlayerReady, //onReady 상태일 때 작동하는 function이름
'onStateChange': onPlayerStateChange //onStateChange 상태일 때 작동하는 function이름
}
});
}
// 4. API는 비디오 플레이어가 준비되면 아래의 function을 불러올 것이다.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. API는 플레이어의 상태가 변화될 때 아래의 function을 불러올 것이다.
// 이 function은 비디오가 재생되고 있을 때를 가르킨다.(state=1),
// 플레이어는 6초 이상 재생되고 정지되어야 한다.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>- 쉽게말해
- 위의 코드블럭에서 사실상 3번 항목만 커스텀해서 사용하면 된다.
- playerVars 속성
- : 대부분 0 또는 1로 설정.
- rel → 연관 동영상 제공 여부. (0 일 경우 연관동영상 안 보임)
- controls → 플레이어 컨트롤러 노출 여부 (0일 경우 안 보임)
- autoplay → 자동재생 여부(1일 경우 자동재생함). mute와 함께 사용
- mute → 음소거 여부(1일 경우 음소거)
- loop → 반복 재생 여부(1일 경우 반복재생함)
- playsinline → iOS 에서 전체화면으로 재생여부(1일 경우 전체화면으로 재생 안함)
- playlist → 영상을 여러개 재생시킬 경우에 사용
- showinfo → 영상에 대한 정보를 감추는 속성이었지만 2018년 이후로 지원하지 않음. 삽입해도 기능이 안 한다는 말... 영상에 마우스 호버했을 때 보여지는 영상 제목과 우측하단에 유튜브 작은 로고는 없앨 수 없음...
반응형
'웹 개발 > JavaScript' 카테고리의 다른 글
| [jQuery]maphilight.js - map태그 마우스오버할 때 강조 효과 나타내는 플러그인 (0) | 2023.04.05 |
|---|---|
| [JS]chart.js로 간단한 차트 만들기 (1) | 2022.12.26 |
| [JS]chart.js - 차트만드는 자바스크립트 라이브러리 (0) | 2022.07.12 |
| [JS]three.js - 3D 자바스크립트 라이브러리 (0) | 2022.07.12 |
| [jQuery] jQuery 슬라이드 라이브러리 (0) | 2021.07.25 |
댓글