유튜브 플레이어 API 2 - 크기변경과 전체화면

2010.02.28 17:14

Resize Player

유튜브 플레이어의 크기를 조절하여, 16:9 혹은 4:3 비율로 시청하실 수 있거나
다양한 크기로 동영상을 시청하실 수 있습니다.

2009년 전까지만 하더라도 표준비율인 
4:3 비율로 주로 업로드가 되었으나, 현재는 대부분의 사용자가 황금비율인 16:9 비율로 업로드가 되고 있습니다.
비율이 통일이 되질않아서 하나의 비율로 고정을 할 경우 검정색 레터박스가 보여지게 됩니다.  그러한 검정색 레터박스가 보기 싫거나 웹화면에서 다양한 크기로 변경하고자 하는 분들은 아래의 소스를 이용하시길 바랍니다.
이용시 주의할 점은  "ytPlayer" 
 속성을 일치시켜야 합니다.
/**
 * Resizing the player in JavaScript.
 */

// Make the player small.
function smallPlayer() {
  resizePlayer(480, 295);
}

// Set the player back to normal.
function normalPlayer() {
  resizePlayer(560, 340);
}

// Make the player big.
function largePlayer() {
  resizePlayer(640, 385);
}

// Set the loaded player to a specific height and width.
function resizePlayer(width, height) {
  var playerObj = document.getElementById("ytPlayer");
  playerObj.height = height;
  playerObj.width = width;
}

   


Full Screen Player
어제 작성한 글의 소스를 가지고 플레이어를 활용할 경우, 동영상의 전체화면이 지원 되질 않습니다.
유튜브에서 제공한 JavaScript 플레이어 샘플이 전체화면 속성이 빠져 있고, 어디에도 설명이 없어서, 
저는 전체화면이 불가능한 것으로 인식하고 전체화면이 되기위해 , 동영상 변경시 마다 플레이어를 바꿔주는 방법을 택하기도 하였습니다.
전체화면이 되기위해서는 url에 &fs=1을 추가하고 params 대신에 {allowScriptAccess: 'always',allowfullscreen: 'true'} 로 변경하여 줍니다.
크롬리스는 전체화면이 지원되질 않습니다. 전체화면이 되기위해서는 직접제작을 하여야 합니다.
"http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1", 
                   "videoDiv", "480", "295", "8", null, null, params, atts);


"http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1&fs=1", 
                   "videoDiv", "480", "295", "8", null, null,{allowScriptAccess: 'always',allowfullscreen: 'true'}, atts);


Loading...



16:9

4:3

신고

'YouTube' 카테고리의 다른 글

유튜브 DATA API 1 source  (1) 2010.03.01
유튜브 DATA API 1  (4) 2010.03.01
유튜브 플레이어 API 2 - 크기변경과 전체화면  (0) 2010.02.28
유튜브 플레이어 API  (5) 2010.02.27
YouTube API JSON-C / AS3 Player  (2) 2010.02.26
유튜브 API란 무엇인가?  (0) 2010.02.20

티스토리 툴바