javascript - "minimum"尺寸以下的 YouTube 播放器

Question

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

To allow room for critical player functionality, players must be at least 200px by 200px.

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

但是，较小的参与者也是可能的。 SwitchCam ，例如，在页面 like this one 上使用它们.

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

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

编辑

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

Answer 1

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

经过一些测试，当 youtube 播放器就绪状态更改为状态时应用此限制: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中，你必须等到视频开始播放才能看到播放器出现。 您现在必须找到满足您需求的最佳解决方法，例如使用缩略图并在就绪状态更改时从负偏移播放器移动到所需位置，希望您明白了。