5

YouTube API 文档将嵌入式播放器 t 的最小尺寸定义为 200 像素 x 200 像素（链接）。

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

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

但是，较小的玩家是可能的。例如，SwitchCam在类似这样的页面上使用它们。

SwitchCam小玩家

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

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

编辑

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

4

2 回答 2

7

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

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

因此，作为一种基本的解决方法，您可以在状态更新后“即时”更改 iframe 的大小，请参见下面的演示和代码：

演示

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

于 2013-05-14T11:55:29.370 回答
2

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

但是，不这样做的主要原因是您将减小 UI 控件的大小，这反过来又会降低可用性。

于 2013-04-29T17:32:12.660 回答