웹사이트에 유튜브 영상을 삽입하는 여러가지 방법
Lpla
·2022. 10. 22. 20:06
iframe embed
가장 기본적인 방식이며 컴알못도 사용 가능하다는 최고 장점이 있다.
예제 1. 간단하고 쉬운 embed 방식
See the Pen 유튜브 iframe embed (1) - 기본 by lpla (@lpla) on CodePen.
예제 2. 매개변수를 사용하여 자동재생과 반복재생 추가
뿐만 아니라 유튜브에서 지원하는 매개변수를 사용하면 간단하면서도 유용한 몇 가지 기능을 사용할 수 있다.
See the Pen 유튜브 iframe embed (1) - 기본 by lpla (@lpla) on CodePen.
주로 사용하는 매개변수는 아래와 같다.
| 매개변수 | 값 | 기능 |
| 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으로 불러온 유튜브 영상에 재생, 일시정지, 정지 이벤트를 사용할 수 있다.
See the Pen 유튜브 Youtube iframe API by lpla (@lpla) on CodePen.
Youtube Iframe Player
iframe embed 방식이 아닌 JavaScript로 iframe을 불러오는 방식이다.
embed와 달리 Youtube Iframe API 를 사용하여 더 많은 이벤트를 다룰 수 있다.
예제 4. 백그라운드 음소거 / 음소거 해제
CodePen 페이지에서 봐야 오류 없이 실행됩니다.
See the Pen Untitled by lpla (@lpla) on CodePen.
예제 5. 스크롤시 영상 재생 / 일시정지
CodePen 페이지에서 봐야 오류 없이 실행됩니다.
See the Pen 유튜브 Iframe Player API - 스크롤 by lpla (@lpla) on CodePen.
Youtube Data API
유튜브에서 지원하는 api를 사용하여 영상을 삽입하는 방식이다.
단순히 영상을 삽입하는 단계를 넘어 썸네일을 불러오거나 특정 채널의 영상을 조회하는 등 사용법이 다양하다.
api를 사용하기 위해서는 먼저 Google Cloud에서 key를 발급받아야 하는데 이 단계는 생략하도록 하겠다.
예제 6. 특정 키워드로 검색하여 불러오기
See the Pen 유튜브 data api by lpla (@lpla) on CodePen.
