javascript - YouTube player below "minimum" size - Stack Overflow

admin管理员组

文章数量:1278820

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

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

• javascript
• css
• youtube
• youtube-api
• youtube-javascript-api

Share Improve this question Follow edited May 17, 2013 at 10:57 David Tuite asked Apr 29, 2013 at 17:22 David TuiteDavid Tuite 22.7k2525 gold badges114114 silver badges178178 bronze badges 5

• youtube./html5 <-- curious, are you taking part in the trial? – Nirvana Tikku Commented May 3, 2013 at 1:28
• I think that trial just gets you the HTML5 player when you're on the YouTube site. I'm talking about using the YouTube player API, which is a different thing all together. – David Tuite Commented May 3, 2013 at 7:01
• I'm not entirely sure that's true. I started creating unit tests for a jQuery plugin that I authored (tubeplayer: github./nirvanatikku/jQuery-TubePlayer-Plugin) and I noticed that the minimum player size error (onErrorNotEmbeddable) doesn't actually get thrown if I've enabled the trial. Basically, I'm able to set the video to < (200,200) without any problems if I've enabled trial mode. I want to better understand this behavior since it seems more like a bug than anything else (based on their documentation). – Nirvana Tikku Commented May 3, 2013 at 14:59
• Still seems like I'd have to ask all my users to enable that trial or they would see errors. It doesn't feel like a workable solution to me. Perhaps the situation will improve if YouTube integrate the features of that trial. – David Tuite Commented May 14, 2013 at 11:08
• just to follow up, you're right about it not being a feasible solution. was just curious. – Nirvana Tikku Commented May 14, 2013 at 14:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +50

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.

Not the most elegant solution, but have you thought about actually scaling down a larger player with the CSS3 transform: scale() property? Beware it's not supported in IE < 9.

The main reason not to do this, though, is that you'll be reducing the size of the UI controls which in turn reduces usability.

本文标签： javascriptYouTube player below quotminimumquot sizeStack Overflow