Проигрыватель YouTube меньше минимального размера

Оказывается, есть ограничение на некоторые видео, которые не позволяют вставлять видео размером менее 200 * 200 (px). Это ограничение распространяется не на все видео (возможно, оно старше последнего обновления API YouTube, я не знаю).

После некоторых тестов это ограничение применяется, когда состояние готовности проигрывателя YouTube изменяется на статус: 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 вам нужно подождать, пока видео не начнет воспроизводиться, чтобы увидеть, как появляется проигрыватель. Теперь вам нужно найти лучший обходной путь, который может соответствовать вашим потребностям, используя, например, миниатюру изображения и переходя от проигрывателя с отрицательным смещением к желаемому местоположению, когда состояние готовности изменилось, надеюсь, вы поняли идею.

Не самое элегантное решение, но задумывались ли вы о том, чтобы уменьшить размер крупного проигрывателя с помощью Преобразование CSS3: свойство scale()? Осторожно, это не поддерживается в IE ‹ 9.

Основная причина, по которой не этого делать, заключается в том, что вы уменьшите размер элементов управления пользовательского интерфейса, что, в свою очередь, снизит удобство использования.