메뉴 건너뛰기

KIM0.COM

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

2016.09.20 01:45

anonymous 조회 수:1013


252A963F5214FAFB037126



유튜브 내장 플레이어의 파라미터. (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>



254DF44F5214F1CD30911E

<기본 상태>

2151AC465214F1F51D5D09

<autohide=0>

2623613E5214F23E2703BE

<autohide=1>

261E733E5214F23E218644

<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>


25514E455214F2C41422D5

<color=white>

2730F5455214F2C42D57CE

<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초 지점으로 종료 설정.


2731C64F5214F681093BD7

<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>


2404213D5214F3E0018AFD

<위: 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>





232D90385214F46C04A573


<modestbranding=1>


223644385214F46D029F63


<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>





2103393C5214F51D0A2E6B


<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>





222B30385214F5AC06BEE1


<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초 이후 지점에서 재생. 





253F6A495214F74138277B


<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>





2411B5485214F7751C2158


<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>





216103505214F7F40B3E18


<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 공식 홈페이지에서 확인하세요.



						
			

	
	
	

			
		
			
				
				

									이 게시물을
			
			
		

				
 
									
				목록
			
		

	

	





 
	목록






		

		쓰기
			

	
		태그