YouTube player below "minimum" size

Question

YouTube API docs define the minimum embedded player size t 200px by 200px ( link ).

To provide space for critical player features, players must be at least 200 pixels by 200 pixels.

My testing led me to conclude that this is true. If I try to play a video in a player that is smaller than the minimum size, the error message "Video player is too small." and the video will not play.

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

I tried to reduce the size of the player by setting its height and width attributes using the style attribute and wrapping it in an contained element that has its height and width. None of these options work.

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

EDIT

It seems that some videos will play on very small players, while others will not. If you intend to test a potential solution, use this video ID: -rMTExNTx2s

Answer 1

It seems that there is a restriction on some video, which does not allow you to embed a video at a size below 200 * 200 (px). This restriction does not apply to all videos (perhaps older than the last youtube update API, I don't know).

After some tests, this restriction applies when the readtate of the youtube player is changed to status: PlayerState.PLAYING (evt.data === 1)

So, as the main workaround, you can resize the iframe on the fly after updating satus, see the 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 see in this DEMO, I am setting up a hidden class using css .hidden{opacity:0} . This is used to hide the player until the video is uploaded. Using display:none; doesn't work, this is definitely another API limitation. Still in this DEMO, you need to wait until the video starts playing to see the player appear. Now you need to find the best solution that can meet your needs, using, for example, a thumbnail and moving from a negative player the offset to the desired location when changing readystate, I hope you got this idea.

Answer 2

Not the smartest solution, but have you thought about zooming out a larger player using the CSS3 transform: scale () property? Beware is not supported in IE <9 .

The main reason not for this is that you will reduce the size of the user interface controls, which in turn will reduce usability.