YouTube 플레이어가 "최소"크기보다 작은

Question

YouTube API 문서는 내장 플레이어의 최소 크기를 200x200 픽셀 (link)으로 정의합니다.

중요한 플레이어 기능을위한 공간을 허용하려면 플레이어가 200x200 픽셀 이상이어야합니다.

내 테스트를 통해 이것이 사실이라는 결론에 도달했습니다. 최소 크기보다 작은 플레이어에서 동영상을 재생하려고하면 '동영상 플레이어가 너무 작음'이라는 오류 메시지가 표시됩니다. 동영상이 재생되지 않습니다.

그러나 더 작은 선수도 가능합니다. 예를 들어 SwitchCam은 like this one 페이지에서 사용합니다.

내가 스타일 속성의 사용함으로써, 높이와 너비 속성의 설정하고 높이와 폭 설정되어있는 포함 된 요소에 포장하여 플레이어의 크기를 줄이는 시도했습니다. 이 옵션들 중 어느 것도 작동하지 않는 것으로 보입니다.

그 밖의 플레이어의 크기를 줄이기 위해 시도 할 수있는 다른 방법이 있습니까?

편집

일부 동영상은 정말 작은 플레이어에서 재생됩니다하지만 다른 사람들이하지 않습니다 나타납니다. 잠재적 솔루션을 테스트하려면 다음 동영상 ID를 사용하십시오. -rMTExNTx2s

Answer 1

크기가 200 * 200 (px) 이하인 동영상을 퍼가는 것을 허용하지 않는 일부 동영상에는 제한이있는 것으로 보입니다. 이 제한 사항은 모든 동영상에 적용되지 않습니다 (어쩌면 마지막 업데이트 YouTube API보다 오래되었습니다. 모르겠습니다). 유튜브 플레이어 readyState의 상태로 변경하는 경우

는 몇 가지 테스트 후,이 제한이 적용됩니다

PlayerState.PLAYING (evt.data === 1) 그래서 기본적인 해결 방법으로, 당신은 satus가 업데이트 된 후 '즉시'은 iframe의 크기를 변경할 수 있습니다 참조 아래 데모 & 코드 :이 데모에서 SSEE 수 있듯이

DEMO

var player, 
    myWidth = "114px", 
    myHeight = "65px"; 

function onYouTubePlayerAPIReady() { 
    player = new YT.Player('testVideo', { 
     height: myWidth, 
     width: myHeight, 
     videoId: '-rMTExNTx2s', 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     }, 
      playerVars: { 
      controls:0, 
      showinfo:0 
      }   
    }); 
} 

function onPlayerStateChange(evt) { 
    if (evt.data == -1) { 
     evt.target.a.width = "200px"; 
     evt.target.a.height = "200px"; 
    } 
    else if (evt.data == 1) { 
      evt.target.a.className = ""; 
     evt.target.a.width = myWidth; 
     evt.target.a.height = myHeight; 
     done = true; 
    } 
} 

, 내가 CSS를 .hidden{opacity:0}와 함께 숨겨진 클래스를 설정합니다. 이것은 비디오가로드되기 전에 플레이어를 숨기는 데 사용됩니다. display:none;을 사용하면 확실하게 다른 API 제한이 적용되지 않습니다. 아직이 데모에서는 플레이어가 나타나는지 비디오가 재생되기 시작할 때까지 기다려야합니다. 예를 들어 미리보기 이미지를 사용하고 독서가 변경되었을 때 음수 오프셋 된 플레이어에서 원하는 위치로 이동하면 필요에 따라 최적의 해결 방법을 찾을 수 있습니다. 아이디어를 얻길 바랍니다.

Answer 2

가장 세련된 솔루션은 아니지만 실제로 더 큰 플레이어를 CSS3 transform: scale() 속성으로 축소하는 것에 대해 생각해 보셨습니까? 조심하십시오 not supported in IE < 9입니다.

주된 이유는 이 아니라이 아니라면 UI 컨트롤의 크기가 줄어들어 유용성이 감소한다는 것입니다.