유튜브 영상 첨부할 때 사용 가능한 옵션 총정리
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
공식 홈페이지에서
확인하세요
.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
43 | 김녕김씨 충정공파 족보 | Kim | 2022.10.02 | 661 |
42 | 다산 2808g-poe poe 활성화 방법 | Kim | 2021.06.08 | 630 |
41 | 샤오미 어메이즈핏빕 (Amazfit Bip) 밀레니즈 루프 스트랩 | Kim | 2018.09.18 | 625 |
40 | 펌프수리 [1] | anonymous | 2016.02.28 | 612 |
» | 유튜브 영상 첨부할 때 사용 가능한 옵션 총정리 | anonymous | 2016.09.20 | 563 |
38 | SKB 비대칭 광랜 속도 | Kim | 2017.06.25 | 544 |
37 | 나노 리모콘 스위치 TV리모콘 등록방법 | anonymous | 2016.11.06 | 524 |
36 | 각종 통신사 및 AS센터 무료 수신자 부담 080 번호 모음 | Kim | 2018.07.16 | 474 |
35 | 샤오미 미메어 프로 콘센트 개조 | Kim | 2018.09.18 | 423 |
34 | KuWFI CPE 120 [2] | Kim | 2022.05.03 | 395 |
33 | 보일러 배관청소 방법 | Kim | 2018.01.05 | 379 |
32 | 보험 | Kim | 2018.02.27 | 317 |
31 | hikvision cctv camera 렌즈 교체 방법 | Kim | 2017.06.25 | 271 |
30 | 비데구입시 고려사항 | Kim | 2015.10.07 | 268 |
29 | 펌프수리 | Kim | 2022.06.07 | 237 |
26 | mwp-2500 asus ac68p 공유기설정 | Kim | 2017.06.28 | 151 |
25 | 온라인 자막 싱크 조절기 | anonymous | 2016.12.20 | 137 |
24 | ASUS 공유기 초기화 | Kim | 2023.07.04 | 114 |