[HTML] 유투브 재생관련 파라메타

유튜브 동영상 재생 옵션 설정하기

 

일단 유튜브 동영상 재생의 기본적인 옵션들은 아래와 같으며, 사용법은 고유주소 뒤에 원하는 옵션들을 그대로 이어붙이면 됩니다. [동영상 반복 재생 옵션은 따로 설명이 필요하기 때문에 뒤에서 설명합니다.]

▶ 동영상 재생 화질 설정 : vq

동영상의 재생 화질을 설정합니다. 단! 동영상이 해당 화질을 지원해야 합니다. 생략하면 기본 360p(medium) 으로 재생합니다.

 

240p 화질로 재생 &vq=light 
360p 화질로 재생 &vq=medium 
480p 화질로 재생 &vq=large 
720p 화질로 재생 &vq=hd720 
1080p 화질로 재생 &vq=hd1080

 

▶ 동영상 자동 재생 여부 설정 : autoplay

사용자가 재생 버튼을 클릭하지 않아도 동영상을 자동으로 재생할지의 여부를 설정합니다. 생략하면 재생하지 않습니다.

 

동영상 자동 재생 &autoplay=1 
동영상 수동 재생 &autoplay=0

 

▶ 동영상 시작 지점 설정 : start

동영상을 몇초 지점부터 재생할 것인지를 설정합니다. 생략하면 처음부터 재생합니다.

 

시작 지점 설정(단위 초) &start=300

 

▶ 동영상 재생 완료 후 추천 동영상 표시 설정 : rel

동영상이 끝난 후 추천 동영상을 표시할 것인지의 여부를 설정합니다. 생략하면 표시합니다.

 

추천 동영상 표시 &rel=1 
추천 동영상 표시하지 않음 &rel=0

▶ 재생영역 외, 감추기 : autohide

컨트로러나 진행 표시줄의 상태를 지정합니다. 이 파라미터를 할당하지 않으면 유투브 플레이어는 재생후, 진행 표시줄을 남겨둔 채 컨트롤러를 fadeOut 시킵니다.

재생 후 시간이 지나도 컨트롤러와 진행줄을 감추지 않도록 합니다. &autohide=0

재생 후 일정시간이 지나면 컨트롤러와 진행표시줄을 모두 감춘다.  &autohide=1

재생 후 일정시간이 지나면 컨트롤러가 보인 상태로 진행 표시줄을 fadeOut시킵니다. 여기서 진행 표시줄의 fadeOut 상태는 높이 값 조정으로 이뤄지는데, 보이는 정보는 큰 차이가 없음 

&autohide=2 (Default)

▶ 진행 표시줄 색상 : color

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

(Default) - red

&color = white

※ modestbranding (유투브 로고 감추기) 와 함께 사용할수 없습니다.

▶ 컨트롤러 감추기 : controls

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

컨트롤러를 표시하지 않습니다.   &controls = 0 

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

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

▶ 컨트롤러 감추기 : disablekb

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

키보드 조작 가능 &disablekb = 0 (Default)

키보드 조작 불가능 &disablekb = 1 

지원조작 : 

스페이스바 (Play / Pause) 

왼쪽 방향키 (현재 장면에서 10% 뒤로 이동)

오른쪽 방향키 (현재 장면에서 10% 앞으로 이동)

위쪽 방향키 (소리를 키웁니다)

아래쪽 방향키 (소리를 줄입니다)

▶ 컨트롤러 감추기 : end

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

10초뒤에 영상이 끝남 &end = 10

▶ 컨트롤러 감추기 : fs

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

전체화면 전화 버튼을 표시하지 않음 &fs = 0

전체화면 전환 버튼을 표시함 (Default)  &fs = 1

▶ 컨트롤러 감추기 : list

재생목록을 지정합니다.

사용예)

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

▶ 컨트롤러 감추기 : list

재생목록 첨부를 위한 추가 파라미터

재생목록의 고유 아이디를 입력하여 재생합니다.  &listType=playlist&list=고유아이디

질의어를 입력하여 해당 검색결과를 재생목록으로 만들어 재생합니다.  

&listType=search&list=고양이

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

&listType=user_uploads&list=소유자아이디

[사용예시]

재생목록의 고유 아이디를 입력하여 재생합니다.

<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

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

반복재생 사용하지 않음 (Default) &Loop = 0

반복재생 사용함 &Loop = 1

※ Loop 문의 경우 Loop 만 붙혀주면 작동을 안한다. 그래서 반드시 playlist 문과 같이 사용해야 정상적으로 작동을 한다.

[사용예시]

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

여기서 빨간색 부분이 동영상 ID 인데 playlist 부분에 동영상 ID를 한번 더 넣어주고 난뒤에 Loop 문을 돌리면 계속 반복을 하게 된다.

▶ 유투브 로고 없애기 : modestbranding

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

YouTube 로고를 표시합니다. (Default)  &modestbranding = 0

YouTube 로고를 표시하지 않습니다. &modestbranding = 1

▶ 타이틀 표시 안 하기 : showinfo

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

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

동영상 정보를 표사힙니다  (Default) &showinfo = 1

▶ 동영상의 시작지점 선택하기 : start

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

영상을 20초지점부터 시작을 합니다. &start = 20

[사용예]

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

▶ 스킨바꾸기 : theme

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

(Default) &theme = dark

&theme = light

[사용예]

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

[사용방법]
만약에 동영상을 720p 화질로 1분 지점부터, 자동으로 재생하고, 추천 동영상을 표시하지 않으려면 아래와 같이 코드를 작성하면 되는 겁니다. 이 때 각 옵션들의 순서는 상관 없습니다.

EMBED 소스 코드 동영상 옵션 설정

<embed width="640" height="360" src="http://www.youtube.com/v/고유주소&vq=hd720&autoplay=1&start=60&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>

 

간단하죠? 이러한 재생 옵션 설정은 IFRAME 소스 코드에서도 동일하게 적용할 수 있습니다. 단! EMBED 와 다른 점이라면 가장 처음에 적용하는 옵션만 & 을 ? 으로 바꿔주면 됩니다. 즉, 아래와 같이 하면 되는 것이죠.

IFRAME 소스 코드 동영상 옵션 설정 [처음에 설정하는 옵션만 & 을 ? 으로 바꿔줌]

<iframe width="640" height="360" src="http://www.youtube.com/embed/고유주소?vq=hd720&autoplay=1&start=60&rel=0" frameborder="0" allowfullscreen></iframe>

 

 

 

동영상 가운데 정렬하기

 

먼저 EMBED 소스 코드 방식의 동영상은 소스 전체를 DIV 박스로 묶은 후 Text-align: Center 스타일을 적용하면 됩니다. 즉 아래와 같이 하면 되는 겁니다.

EMBED 소스 코드 동영상 가운데 정렬
 
<div style="text-align: center;">
 <embed width="640" height="360" src="http://www.youtube.com/v/고유주소" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</div>

 

하지만 IFRAME 에서는 이러한 정렬이 먹히지 않기 때문에, 아래와 같이 DIV 박스의 크기를 IFRAME 의 크기와 동일하게 맞춰주고 좌우의 여백을 자동으로 설정하는 방식으로 해주어야 합니다.

IFRAME 소스 코드 동영상 가운데 정렬

<div style="width: 640px; margin: 0px auto;">
 <iframe width="640" height="360" src="http://www.youtube.com/embed/고유주소" frameborder="0" allowfullscreen></iframe>
</div>

 

이러한 방식으로 EMBED 소스 코드와 IFRAME 소스 코드의 동영상을 가운데로 정렬할 수 있습니다.