유튜브 동영상 iframe 사용시 parameter 값 정리

유튜브 동영상을 웹 페이지에 올릴 일이 생겨서 하는 김에 기록 ✍️

js를 사용하면 더 다양하게 커스텀 할 수 있지만,
사용할 기능이 간단히 query parameter 추가만으로도 가능하기에 관련 내용만 정리!

js 코드 사용 문서

• https://developers.google.com/youtube/iframe_api_reference?hl=ko

1. 유튜브 동영상 코드 얻기

유튜브 동영상 아래 공유 - 퍼가기 선택하여 iframe 코드를 얻어온다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/9axFSzoYKXY?si=pJ7jfB-fJ25ol7SP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

가져온 코드의 width, height, src 값을 편집해서 사용하면 된다!

2. parameter 추가

src 값을 살펴보면 다음과 같다.

https://www.youtube.com/embed/VMgEOazZC08?si=zlj-Kw-_aHy5WVmI

• VMgEOazZC08: 해당 영상 id
• si=zlj-Kw-_aHy5WVmI: YouTube에서 사용하는 추적, 분석 관련 코드

이 주소 뒤에 &와 parameter를 덧붙여 사용하면 된다.

유용한 parameter 종류

아래 나타나는 parameter의 값으로는 1 혹은 0 만 사용이 가능하다.
(1로 하면 true 사용, 0은 false 미사용)

자동 재생 autoplay

autoplay=1

• ex.

    https://www.youtube.com/embed/VMgEOazZC08?si=zlj-Kw-_aHy5WVmI&autoplay=1
  

  • 자동 재생 사용: autoplay=1
  • 미사용: autoplay=0

음소거 mute

mute=1

• ex.

    https://www.youtube.com/embed/VMgEOazZC08?si=zlj-Kw-_aHy5WVmI&mute=1
  

  • 음소거 사용: mute=1
  • 미사용: mute=0

반복 재생 loop

loop=1

• ex.

    https://www.youtube.com/embed/VMgEOazZC08?si=zlj-Kw-_aHy5WVmI&loop=1
  

  • 반복 재생 사용: loop=1
  • 미사용: loop=0

키보드 입력 금지 disablekb

disablekb=1

• ex.

    https://www.youtube.com/embed/VMgEOazZC08?si=zlj-Kw-_aHy5WVmI&disablekb=1
  

  • 키보드 입력 금지 사용: disablekb=1
  • 미사용: disablekb=0

재생중 하단 유튜브 로고 가리기 modestbranding

modestbranding=1

• ex.

    https://www.youtube.com/embed/VMgEOazZC08?si=zlj-Kw-_aHy5WVmI&modestbranding=1
  

  • 재생중 하단 유튜브 로고 가리기 사용: modestbranding=1
  • 미사용: modestbranding=0

주의할 점은, 이 기능 사용 설정을 해두어도 일시정지 하면 로고가 나타난다.

컨트롤(영상 조종 기능) 없애기 controls

controls=0

• ex.

    https://www.youtube.com/embed/VMgEOazZC08?si=zlj-Kw-_aHy5WVmI&controls=0
  

  • 컨트롤 사용: controls=1
  • 미사용: controls=0

컨트롤 미사용 설정한 경우,
사용자의 브라우저에 유튜브 자막이 켜져있게 설정되어있거나 동영상 업로드 설정에 자막을 켜놓은 상황이라면
이 영상에서도 자막이 켜지게 되는데 이것을 제어 할 수 없게 된다.

재생 목록 playlist

playlist=VMgEOazZC08,8Re0MGN0Zh8

• ex.

    https://www.youtube.com/embed/VMgEOazZC08?si=zlj-Kw-_aHy5WVmI&playlist=VMgEOazZC08,8Re0MGN0Zh8
  

  • 재생 목록 사용: playlist=영상아이디,콤마로,나열

나열 된 영상이 순서대로 재생됨

example

<iframe width="100%" height="500" src="https://www.youtube.com/embed/VMgEOazZC08?si=zlj-Kw-_aHy5WVmI&autoplay=1&mute=1&loop=1&disablekb=1&modestbranding=1&controls=1&playlist=VMgEOazZC08,8Re0MGN0Zh8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>

---

참고한 사이트

• https://developers.google.com/youtube/player_parameters?hl=ko#Parameters