低于“最小”尺寸的 YouTube 播放器

Question

YouTube API 文档将嵌入式播放器 t 的最小尺寸定义为 200 像素 x 200 像素 (link)。

要为关键的播放器功能留出空间，播放器的尺寸必须至少为 200 x 200 像素。

我的测试使我得出结论，这是真的。如果我尝试在小于最小尺寸的播放器中播放视频，我会收到一条错误消息，提示“视频播放器太小”。并且视频不会播放。

但是，较小的播放器是可能的。例如，SwitchCam 在页面 like this one 上使用它们。

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

我还可以尝试什么来减小播放器的尺寸？

编辑

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

Answer 1

不是最优雅的解决方案，但您是否考虑过使用CSS3 transform: scale() 属性实际缩小更大的播放器？注意是not supported in IE < 9。

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

Answer 2

似乎对某些视频有限制，不允许嵌入尺寸小于 200*200 (px) 的视频。此限制不适用于所有视频（可能比上次更新的 youtube API 更早，我不知道）。

经过一些测试，当 youtube player readystate 更改为 status: PlayerState.PLAYING (evt.data === 1) 时，会应用此限制

因此，作为一种基本的解决方法，您可以在状态更新后“即时”更改 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 中，您必须等到视频开始播放才能看到播放器出现。 您现在必须找到可以满足您需求的最佳解决方法，例如使用缩略图并在 readystate 发生变化时从负偏移播放器移动到希望的位置，希望您明白这一点。