한암의 누리 사랑방

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

작성일 작성자 한암

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

 

퍼가기를 통해 YouTube 동영상을 웹사이트나 블로그에 공유할 경우에 소스 코드로 embed 소스 (이전 소스 코드)와 iframe 소스가 이용되는데 이 소스 코드에서 자주 사용되는 옵션은 다음과 같으며 사용법은 고유주소 뒤에 원하는 옵션들을 그대로 이어 붙여주면 된다.

 

 

(1) 동영상 재생 화질 설정, [&vq]

  동영상의 재생 화질을 설정한다. 생략하면 기본 360p(medium) 으로 재생

  (단 동영상이 해당 화질을 지원해야 된다)

 

  240p  화질로 재생  &vq=light

  360p  화질로 재생  &vq=medium

  480p  화질로 재생  &vq=large

  720p  화질로 재생  &vq=hd720

  1080p 화질로 재생  &vq=hd1080

 

(2) 동영상 자동 재생 여부 설정, [&autoplay]

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

 

  동영상 자동 재생  &autoplay=1

  동영상 수동 재생  &autoplay=0

 

(3) 동영상 시작 지점 설정, [&start]

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

 

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

 

(4) 동영상 재생 완료 후 추천 동영상 표시 설정, [&rel]

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

 

  추천 동영상 표시  &rel=1

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

 

(5) 동영상 타이틀 정보 표시 설정, [&showinfo]

 

  타이틀 정보 표시 &showinfo=1

  타이틀 정보 표시하지 않음 &showinfo=0

 

(6) 동영상 반복 재생 설정, [&loop]

  동영상을 반복 재생한다. 동영상 플레이어 버전이 ?version=2 일 때만 정상 작동된다.

 

  동영상 반복 재생 &loop=1

  동영상 1 회 재생 &loop=0

 

  현재 유튜브 플레이어의 embed 방식의 기본 버전은 ?version=3 으로 이 버전에서는 동영상의 반복 재생 기

  능을 사용할 수 없다. 동영상을 반복 재생시키기 위해서는 유튜브 플레이어의 버전을 이전 버전인 ?version

  =2 로 설정되어야 된다. 따라서 재생 옵션 처음에 플레이어의 버전을 2 로 설정한 후, 자동 재생과 반복 재생

  옵션을 추가하면 해당 동영상을 무한 반복시킬 수 있다.

 

  embed 소스 코드 - 자동 재생, 반복 재생

  <embed width="640" height="360" src="http://www.youtube.com/v/고유주소?version=2 &autoplay=1

  &loop=1" type="application/x-shockwave-flash" x-allowscriptaccess="always" allowfullscreen="true">

  </embed>

 

(7) 동영상 가운데 정렬하기

 

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

   EMBED 소스 코드 방식의 동영상은 소스 전체를 DIV 박스로 묶은 후 Text-align: Center 스타일을 적용하

   면 된다.

 

  <div style="text-align: center;">

  <embed width="640" height="360" src="http://www.youtube.com/v/고유주소"

   type="application/x-shockwave-flash" x-allowscriptaccess="always"  

   allowfullscreen="true"></embed>

  </div>

 

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

   iframe 에서는 아래와 같이 DIV 박스의 크기를 iframe의 크기와 동일하게 지정하고 좌우의 여백을 자동으로

  설정하는 방식으로 한다.

 

  <div style="width: 640px; margin: 0px auto;">

  <iframe width="640" height="360" src="http://www.youtube.com/embed/고유주소"

   frameborder="0" allowfullscreen></iframe></div>

 

(8) iframe 소스 코드인 경우 동영상 옵션 설정

   (처음 설정하는 옵션에서만 [&]을 [?]으로 바꿔준다)

   iframe 소스 코드에서 재생 옵션 설정은 embed와 같은 방법으로 설정할 수 있다.

   단embed와 다른 점이라면 맨 처음에 설정하는 옵션에서 [&]을 [?]로 바꿔주면 된다.

 

  <iframe width="640" height="360" src="http://www.youtube.com/embed/고유주소

  ?vq=hd720&autoplay=1&start=60&rel=0" frameborder="0" allowfullscreen></iframe>

 

《 예 제 》

  ① embed - 720p 화질로 1분 지점부터, 자동으로 재생하고, 추천 동영상을 표시 않음

  <embed width="640" height="360" src="http://www.youtube.com/v/고유주소

  &vq=hd720&autoplay=1&start=60&rel=0" type="application/x-shockwave-flash"

  x-allowscriptaccess="always" allowfullscreen="true"></embed>

 

  ② embed - 720P 화질, 수동 재생, 처음부터 재생, 추천 동영상 표시 않음, 가운데 정렬

  <div style="text-align: center;">

  <embed width="640" height="360" src="http://www.youtube.com/v/고유주소&vq=hd720&autoplay=0

   &start=0&rel=0" type="application/x-shockwave-flash" x-allowscriptaccess="always"

   allowfullscreen="true"></embed></div>

 

  ③ iframe - 480p 화질, 수동 재생, 12초 지점부터 재생, 추천 동영상 표시, 가운데 정렬

  <div style="width: 640px; margin: 0px auto;"> <iframe width="640" height="360"

  src="http://www.youtube.com/embed/고유주소?vq=large&autoplay=0&start=12&rel=1" frameborder="0"

  allowfullscreen></iframe></div>

 

 



맨위로
통합 검색어 입력폼