유튜브 영상 첨부할 때 사용 가능한 옵션 총정리

유튜브 내장 플레이어의 파라미터. (YouTube Embedded Players Parameters)

유튜브 임배디드 플레이어이서는 영상 재생 설정을 위한 다양한 형식의 파라미터를 제공하는데요. 사용자는 자신이 이용하려는 동영상의 공유코드에 파라미터 조합기호(&)를 이용해서 다양하게 설정할 수 있답니다.

사용 예.

VIDEO_ID?autohide=0&autoplay=1&color=white&theme=light&vq=hd1080

그럼 어떤 파라미터들이 있는지 살펴볼까요?

---

 

[재생영역 외, 감추기]

autohide (지원하는 플레이어: AS3, AS2, HTML5) 

컨트롤러나 진행 표시줄(progress bar)의 상태를 지정합니다. 이 파라미터를 할당하지 않으면 유튜브 플레이어는 재생 후, 진행 표시줄을 남겨둔 채 컨트롤러를 페이드아웃시킵니다. 하지만, 다음과 같은 값을 할당하여 이 상태를 조절할 수 있습니다.

   Value -

   0 : 재생 후 시간이 지나도 컨트롤러와 진행 표시줄을 감추지 않습니다.

   1 : 재생 후 일정시간이 지나면 컨트롤러와 진행 표시줄을 모두 감춥니다.

   2(Default) : 재생 후 일정시간이 지나면 컨트롤러(재생버튼이나 소리조절 같은 컨트롤러 등)가 보인 상태로 진행 표시줄을 페이드 아웃 시킵니다. 여기서 진행 표시줄의 페이드아웃 상태는 높이 값 조정으로 이루어지는데요. 보이는 정도는 큰 차이가 없습니다.

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?autohide=0" frameborder="0" allowfullscreen></iframe>

autohide.txt

<기본 상태>

<autohide=0>

<autohide=1>

<autohide=2>

---

 

티스토리에서의 유튜브 영상 첨부방법은 티스토리에 유튜브 영상 첨부하기 포스트에서 확인하시기 바랍니다.

---

 

[자동재생]

autoplay (지원하는 플레이어: AS3, AS2, HTML5)

유튜브 플레이어가 로드되었을 때 영상의 자동 재생 여부를 지정합니다.

   Value -

   0(Default) : 자동 재생을 사용하지 않음.

   1 : 자동 재생 사용.

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?autoplay=1" frameborder="0" allowfullscreen></iframe>

autoplay.txt

---

 

[진행 표시줄 색상]

color (지원하는 플레이어: AS3, HTML5)

진행 표시줄의 색상을 지정할 수 있습니다.

   Value -

   red(Default) : 진행 표시줄의 색상을 빨간색으로 지정.

   white : 진행 표시줄의 색상을 흰색으로 지정. modestbranding(유튜브 로고 감추기) 파라미터와 함께 사용할 수 없음.

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?color=white" frameborder="0" allowfullscreen></iframe>

color.txt

 

<color=white>

<color=red>

---

 

[컨트롤러 감추기]

controls (지원하는 플레이어: AS3, HTML5)

영상을 재생할 때 컨트롤러의 표시 여부를 지정합니다.

   Value -

   0 : 컨트롤러를 표시하지 않습니다.

   1(Default) : 컨트롤러를 표시합니다. (Flash 플레이어가 즉시 로드됩니다.)

   2 : 컨트롤러를 표시합니다. (사용자가 재생했을 때 Flash 플래이어가 로드됩니다.)

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?controls=0" frameborder="0" allowfullscreen></iframe>

controls.txt

---

 

[키보드로 조작할 수 없게 설정]

disablekb (지원하는 플레이어: AS3, AS2)

플레이어를 키보드로 제어할 수 있을지에 대한 여부를 지정합니다.

   Value -

   0(Default) : 키보드 조작 가능.

   1 : 키보드 조작 불가능.

지원되는 조작 – 스페이스 바(Play / Pause), 왼쪽 방향키(현재 장면에서 10% 뒤로 이동합니다.), 오른쪽 방향키(현재 장면에서 10% 앞으로 이동합니다.) 위쪽 방향키(소리를 키웁니다.), 아래쪽 방향키(소리를 줄입니다.)

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?disablekb=1" frameborder="0" allowfullscreen></iframe>

disablekb.txt

 

---

 

[영상의 종료구간 설정]

end (지원하는 플레이어: AS3)

영상의 재생이 끝나는 지점을 지정합니다.

   Value - 지정한 값 (종료를 원하는 지점의 초 단위 값.)

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?end=10" frameborder="0" allowfullscreen></iframe> 영상 재생 후 10초 지점으로 종료 설정.

end.txt

<end=30>

---

 

[전체화면 전환 버튼 표시]

fs (지원하는 플레이어: AS3, AS2)

컨트롤러에 전체화면 버튼의 표시 여부를 지정합니다.

   Value -

   0 : 전체화면 전환 버튼을 표시하지 않음.

   1(Default) : 전체화면 전환 버튼을 표시함.

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?fs=0" frameborder="0" allowfullscreen></iframe>

fs.txt

<위: fs=1 / 아래: fs=0>

---

 

[재생목록(Playlist) 첨부하기]

list (지원하는 플레이어: AS3)

재생목록을 지정합니다.

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed?listType=playlist&list=PL2ukLotRMIsYGSx33J065-Q7cp-a18znV" frameborder="0" allowfullscreen></iframe>

list.txt

 

---

 

[재생목록(Playlist) 첨부를 위한 추가 파라미터]

listType (지원하는 플레이어: AS3)

재생목록의 형태를 지정합니다.

   Value -

   playlist : list=PLAYLIST_ID (재생목록의 고유 아이디를 입력하여 재생합니다.)

   search : list=QUERY (질의어를 입력하여 해당 검색결과를 재생목록으로 만들어 재생합니다.)

  user_uploads : list=USER_ID (사용자의 아이디를 입력하여 해당 소유자가 업로드한 영상을 재생합니다.)

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed?listType=playlist&list=PL2ukLotRMIsYGSx33J065-Q7cp-a18znV" frameborder="0" allowfullscreen></iframe>

<iframe width="500" height="375" src="http://www.youtube.com/embed?listType=serch&list=고양이" frameborder="0" allowfullscreen></iframe>

<iframe width="500" height="375" src="http://www.youtube.com/embed?listType=user_uploads&list=phoko1" frameborder="0" allowfullscreen></iframe>

listtype.txt

 

---

[반복재생]

loop (지원하는 플레이어: AS3, HTML5)

영상을 반복 재생할 수 있도록 지정합니다.

   Value -

   0(Default) : 반복재생 사용 안 함

   1 : 반복재생 사용.

   단일 영상은 해당 영상만 반복되며, 재생목록은 전체 목록을 반복합니다.

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?loop=1" frameborder="0" allowfullscreen></iframe>

loop.txt

참고로 loop의 경우 AS3 버전의 플레이어와 IFrame 내장 코드에서만 작동합니다. 혹시나 개별 영상의 반복 기능이 정상적으로 작동되지 않으면 playlist 파라미터를 추가해주세요.

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

사용 예.

 <iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?version=3&loop=1&playlist=MRztefKS6sk" frameborder="0" allowfullscreen></iframe>

---

 

[유튜브 로고 없애기]

modestbranding (지원하는 플레이어: AS3, HTML5)

해당 영상의 유튜브 페이지로 바로 갈 수 있는 유튜브 로고의 출력 여부를 지정합니다.

   Value -

   0(Default) : YouTube 로고를 표시합니다.

   1 : YouTube 로고를 표시하지 않습니다.

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?modestbranding=1" frameborder="0" allowfullscreen></iframe>

modestbranding.txt

<modestbranding=1>

<modestbranding=0>

---

[추천 영상 표시 안 하기]

rel (지원하는 플레이어: AS3, AS2, HTML5)

영상의 재생이 끝났을 때 출력되는 관련 영상 목록을 표시할지에 대한 여부를 지정할 수 있습니다. (추천 영상 목록의 개념)

   Value -

   0 : 관련 영상을 표시하지 않습니다.

   1(Default) : 관련 영상을 표시합니다.

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?rel=0" frameborder="0" allowfullscreen></iframe>

rel.txt

<rel=1>

---

 

 

[타이틀 표시 안 하기]

showinfo (지원하는 플레이어: AS3, AS2, HTML5)

영상의 타이틀 및 정보를 표시할지에 대한 여부를 지정합니다.

   Value -

   0 : 동영상 정보를 표시하지 않습니다.

   1(Default) : 동영상 정보를 표시합니다.

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?showinfo=0" frameborder="0" allowfullscreen></iframe>

showinfo.txt

<showinfo=1>

---

 

 

[시작지점 내 마음대로 정하기]

start (지원하는 플레이어: AS3, AS2, HTML5)

영상의 재생 시작지점을 지정합니다.

   Value - 지정한 값 (시작을 원하는 지점의 초 단위 값.)

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?start=10" frameborder="0" allowfullscreen></iframe> 원본 영상의 10초 이후 지점에서 재생. 

start.txt

<start=30>

---

 

 

[스킨 바꾸기]

theme (지원하는 플레이어: AS3, AS2, HTML5)

플레이어의 테마를 지정합니다. 

   Value - dark(Default), light

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?theme=light" frameborder="0" allowfullscreen></iframe>

theme.txt

<theme=light>

---

[HD영상 설정하기]

vq (지원하는 플레이어: AS3, HTML5)

영상의 비디오 품질을 지정합니다.

   Value - hd720, hd1080

사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?vq=hd1080" frameborder="0" allowfullscreen></iframe>

vq.txt

<vq=hd1080>

---

혼합 사용 예.

<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?autohide=0&autoplay=1&color=white&controls=0&disablekb=1&start=30

&end=120&rel=0&theme=light&vq=hd1080" frameborder="0" allowfullscreen></iframe>

youtube embeded.txt

유튜브 플레이어 파라미터와 관련된 더 자세한 사항은 YouTube API 공식 홈페이지에서 확인하세요.