Авто-полный экран для вставки на YouTube - PullRequest
Новая
       19

Авто-полный экран для вставки на YouTube

19 голосов
/ 30 сентября 2011

У меня есть видео с YouTube, вставленное на веб-страницу.

Можно ли выводить видео на полный экран, когда пользователь нажимает кнопку воспроизведения, используя HTML5 iframe с API-интерфейсом Youtube ?

Использование проигрывателя Chromeless недоступно, поскольку веб-сайт предназначен для iPad.

Ответы [ 4 ]

16 голосов
/ 29 ноября 2013

Обновление за ноябрь 2013 : это возможно - реальный полноэкранный режим, а не полное окно со следующей техникой Как говорит @chrisg, API JS YouTube не имеет опции «полный экран по умолчанию».

  • Создание пользовательской кнопки воспроизведения
  • Используйте YouTube JS API для воспроизведения видео
  • Используйте полноэкранный API HTML5, чтобы сделать элемент полноэкранным

Вот код. 

var $ = document.querySelector.bind(document);

// Once the user clicks a custom fullscreen button
$(playButtonClass).addEventListener('click', function(){
  // Play video and go fullscreen
  player.playVideo();

  var playerElement = $(playerWrapperClass);
  var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(playerElement)();
  }
})
3 голосов
/ 30 сентября 2011

Насколько я знаю, это невозможно с помощью кода для вставки YouTube или API JavaScript YouTube.Вы должны написать свой собственный плеер, чтобы иметь эту функциональность.

Когда вы читаете, похоже, что вы можете использовать хромированный плеер YouTube, и он изменит свой размер до ширины и высотыродительский элемент.

Это означает, что если вы используете Chromeless Player, вы можете изменить размер div с помощью javascript с событием play.

0 голосов
/ 24 февраля 2018

Я подумал, что выложу более простой обновленный метод для решения этого вопроса с помощью html5.

.ytfullscreen - это название кнопки или что бы вы ни нажали.#yrc-player-frame-0 будет именем вашего iframe. 

jQuery(".ytfullscreen").click(function () {
    var e = document.getElementById("yrc-player-frame-0");
    if (e.requestFullscreen) {
        e.requestFullscreen();
    } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
    } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
    } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
    }
});
0 голосов
/ 30 сентября 2011

Нет, это невозможно из-за проблем с безопасностью.

Конечный пользователь должен сделать что-то для запуска полноэкранного режима.

Если вы запустили приложение Adobe AIR, выможет автоматизировать полноэкранную активацию без конечного пользователя.Но тогда это будет настольное приложение, а не веб-страница.

...