YouTube播放器低于"最小"尺寸

Question

YouTube API文档将嵌入式播放器的最小尺寸定义为200px×200px(链接).

为了给关键球员功能留出空间,玩家必须至少200px乘200px.

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

但是,较小的球员是可能的.例如,SwitchCam在像这样的页面上使用它们.

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

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

编辑

看来有些视频会在非常小的播放器中播放,但其他视频则不会.如果您要测试潜在的解决方案,请使用此视频ID:-rMTExNTx2s

Answer 1

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

经过一些测试,当youtube播放器readystate更改为status时,将应用此限制: 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中,你必须等到视频开始播放才能看到播放器出现.您现在可以找到最适合您需求的解决方法,例如使用缩略图图像,并在正态状态发生变化时从负偏移玩家移动到希望的位置,希望您有这个想法.