Question

YouTube API文档将嵌入式播放器的最小尺寸定义为200px×200px（link）。

为了获得关键玩家功能的空间，玩家必须至少200px乘200px。

我的测试让我得出结论，这是真的。如果我尝试在小于最小尺寸的播放器中播放视频，我会收到一条错误消息，上面写着“视频播放器太小”。并且视频无法播放。

然而，较小的球员是可能的。例如，SwitchCam在页面like this one上使用它们。

SwitchCam small players

我尝试通过设置它的高度和宽度属性，使用它的样式属性并将其包装在包含高度和宽度设置的包含元素中来减小播放器大小。这些选项都不起作用。

我还可以尝试减少播放器的尺寸吗？

修改

有些视频似乎会在非常小的玩家中播放，但其他视频则不然。如果您要测试潜在的解决方案，请使用此视频ID：-rMTExNTx2s

Answer 1

似乎某些视频存在限制，不允许将视频嵌入到200 * 200（px）以下的视频中。此限制不适用于所有视频（可能比上次更新youtube API旧，我不知道）。

经过一些测试，当youtube播放器就绪状态更改为状态时，会应用此限制：PlayerState.PLAYING (evt.data === 1)

因此，作为基本的解决方法，您可以在更新satus后更改iframe的大小，请参阅下面的演示和代码：

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

正如你可以在这个DEMO中看到的那样，我用css .hidden{opacity:0}设置了一个隐藏的类。这用于在加载视频之前隐藏播放器。使用display:none;不起作用，肯定是其他API限制。仍然在这个DEMO中，你必须等到视频开始播放才能看到播放器出现。您现在可以找到最适合您需求的解决方法，例如使用缩略图图像，并在正态状态发生变化时从负偏移播放器移动到希望的位置，希望您有这个想法。

Answer 2

不是最优雅的解决方案，但您是否考虑过使用CSS3 transform: scale()属性缩小规模较大的玩家？请注意它是not supported in IE < 9。

不这样做的主要原因是，您将减少UI控件的大小，从而降低可用性。

YouTube播放器低于＆＃34;最低＆＃34;尺寸

2 个答案: