YouTube player below "minimum" size

Question

The YouTube API docs define the minimum size of an embedded player t to be 200px by 200px (link).

To allow room for critical player functionality, players must be at least 200px by 200px.

My testing has lead me to the conclusion that this is true. If I try to play a video in a player which is smaller than the minimum size, I get an error message which says "Video player is too small." and the video will not play.

However, smaller players are possible. SwitchCam, for example, uses them on pages like this one.

I've tried reducing the player size by setting it's height and width attributes, by using it's style attribute and by wrapping it in a containing element which has it's height and width set. None of these options appear to work.

What else can I try to reduce the size of the player?

EDIT

It appears that some videos will play in really small players but others will not. If you're going to test a potential solution, please use this video ID: -rMTExNTx2s

Answer 1

It's appears there is a restriction on some video which don't allow embeding video on size inferior to 200*200 (px). This restriction is not applied for all video (maybe older than last update youtube API, i don't know).

After some tests, this restriction is applied when youtube player readystate changed to status: PlayerState.PLAYING (evt.data === 1)

So as a basic workaround, you could change size of iframe 'on the fly' after the satus has been updated, see demo&code below:

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

As you can ssee in this DEMO, i set an hidden class with css .hidden{opacity:0}. This is used to hide player before the video is loaded. Using display:none; doesn't work, its surely an other API restriction. Still in this DEMO, you have to wait until the video has started to play to see the player appears. You have now to find the best workaround which could fit your needs, using e.g a thumbnail image and moving from negative offset player to wished location when readystate has changed, hope you got the idea.