-
[HTML] youtube embed Cheat SheetDev 2023. 4. 17. 16:22
Auto play
<iframe src='https://www.youtube.com/embed/<youtube video ID>?autoplay=1&mute=1'/>
youtube embed autoplay를 위해서는 mute 설정 값이 필수적이다. 만약 mute 값을 0으로 수정하면 자동 재생은 실행되지 않는다.
그 이유는 2018년 4월 이후로 구글이 정책상 뮤트되지 않은 상태로 자동재생되는 것을 막았기 때문이다.
Infinite Loop
<iframe src='https://www.youtube.com/embed/<youtube video ID>?autoplay=1&mute=1&version=3&loop=1&playlist=<youtube video ID>' />
loop :
단일 동영상 플레이어의 경우 1로 설정하면 플레이어가 첫 번째 동영상을 반복해서 재생합니다.
재생목록 플레이어(또는 맞춤 플레이어)에서는 플레이어가 전체 재생목록을 재생한 다음 첫 번째 동영상부터 다시 시작합니다.
지원되는 값은 0 및 1이며 기본값은 0입니다.
참고: 이 매개변수는 AS3 플레이어 및 AS3 또는 HTML5 플레이어를 로드할 수 있는 IFrame 삽입에서 제한적으로 지원됩니다. 현재 loop 매개변수는 playlist 매개변수와 함께 사용하는 경우에만 AS3 플레이어에서 작동합니다. 단일 동영상을 반복 재생하려면 loop 매개변수 값을 1로 설정하고 playlist 매개변수 값을 Player API URL에서 이미 지정한 동일한 동영상 ID로 설정합니다.Playlist Loop
<iframe src='https://www.youtube.com/embed?autoplay=1&mute=1&version=3&loop=1&listType=playlist&list=<youtube playlist ID>' />
유튜브 플레이리스트 루프를 위해서는 listType은 playlist, list에 생성한 플레이리스트 아이디를 list 값으로 지정해주면된다.
Result
Reference
https://developers.google.com/youtube/player_parameters?hl=ko#Embedding_a_Player
'Dev' 카테고리의 다른 글
[React] PIP 직접 구현해보기 (0) 2023.06.21 [Next.js] Next.js 13 Study (0) 2023.04.17 [React] IntersectionObserver를 사용한 infinite scroll 구현하기 (0) 2023.04.17 [React] Swiper.js Cheat sheet (0) 2023.04.15 [Extension] mac에서 vs code 창 투명하게 하기 (0) 2023.04.15