유튜브 영상 첨부할 때 사용 가능한 옵션 총정리
2016.09.20 00:45
유튜브 내장 플레이어의 파라미터. (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=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>
[진행 표시줄 색상]
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=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>
[키보드로 조작할 수 없게 설정]
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>
[영상의 종료구간 설정]
end (지원하는 플레이어: AS3)
영상의 재생이 끝나는 지점을 지정합니다.
Value - 지정한 값 (종료를 원하는 지점의 초 단위 값.)
사용 예.
<iframe width="500" height="375" src="http://www.youtube.com/embed/MRztefKS6sk?end=10" frameborder="0" allowfullscreen></iframe> 영상 재생 후 10초 지점으로 종료 설정.
<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=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>
[재생목록(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>
[반복재생]
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의 경우 AS3 버전의 플레이어와 IFrame 내장 코드에서만 작동합니다. 혹시나 개별 영상의 반복 기능이 정상적으로 작동되지 않으면 playlist 파라미터를 추가해주세요.
사용 예.
<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=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=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=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=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=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=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 API 공식 홈페이지에서 확인하세요.
