it-roy-ru.com

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

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

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

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

19
Philip Kirkbride

Обновление за ноябрь 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)();
  }
})
15
mikemaccana

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

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

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

3
Chris G.

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

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

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

0
Teddy