웹사이트에 유튜브 영상을 삽입하는 여러가지 방법

iframe embed

가장 기본적인 방식이며 컴알못도 사용 가능하다는 최고 장점이 있다.

 

 

예제 1. 간단하고 쉬운 embed 방식

 

 

 

예제 2. 매개변수를 사용하여 자동재생과 반복재생 추가

뿐만 아니라 유튜브에서 지원하는 매개변수를 사용하면 간단하면서도 유용한 몇 가지 기능을 사용할 수 있다.

 

 

주로 사용하는 매개변수는 아래와 같다.

매개변수	값	기능
autoplay	1	자동재생 기능 사용
mute	1	음소거
controls	0	플레이어 컨트롤러 숨김
loop	1	반복재생 기능 사용
playlist	영상 ID 혹은 플레이리스트 ID	영상 이어서 재생
playsinline	1	ios에서 인라인으로 영상 재생

주의할 점은 한 가지 영상만 반복재생하기 위해서는 loop=1 과 playlist=영상ID 를 같이 써야 한다.

영상 ID와 플레이리스트 ID는 URL에서 확인할 수 있다.

 

그리고 playsinline 이 없으면 ios에서 전체 화면으로 영상이 재생되기 때문에 넣어주는게 좋다.

 

 

예제 3. postMessage 

HTML5에서 지원하는 postMessage를 사용하면 iframe으로 불러온 유튜브 영상에 재생, 일시정지, 정지 이벤트를 사용할 수 있다.

 

 

Youtube Iframe Player

iframe embed 방식이 아닌 JavaScript로 iframe을 불러오는 방식이다.

embed와 달리 Youtube Iframe API 를 사용하여 더 많은 이벤트를 다룰 수 있다.

 

예제 4. 백그라운드 음소거 / 음소거 해제

CodePen 페이지에서 봐야 오류 없이 실행됩니다.

 

 

 

예제 5. 스크롤시 영상 재생 / 일시정지

CodePen 페이지에서 봐야 오류 없이 실행됩니다.

 

 

Youtube Data API

유튜브에서 지원하는 api를 사용하여 영상을 삽입하는 방식이다.

단순히 영상을 삽입하는 단계를 넘어 썸네일을 불러오거나 특정 채널의 영상을 조회하는 등 사용법이 다양하다.

api를 사용하기 위해서는 먼저 Google Cloud에서 key를 발급받아야 하는데 이 단계는 생략하도록 하겠다.

 

예제 6. 특정 키워드로 검색하여 불러오기