Marka YouTube wideo w trybie pełnoekranowym przy użyciu iframe i JavaScript API

Question

mam wbudowany video youtube z ukrytymi kontroli:

<iframe id="ytplayer" type="text/html" width="400" height="225" 
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0 
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer" 
frameborder="0" allowfullscreen></iframe> 

mogę sterować z API YouTube Javascript.

var tag = document.createElement('script'); 

tag.src = "//www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 
function onYouTubeIframeAPIReady() { 
player = new YT.Player('ytplayer', { 
    events: { 
    'onReady': onPlayerReady, 
    'onStateChange': onPlayerStateChange 
    } 
}); 
} 

Rzeczy takie jak player.playVideo() i tak działają doskonale. Teraz szukam sposobu, aby wideo było odtwarzane w trybie pełnoekranowym za pomocą wywołania Javascript, ale nie mogłem znaleźć żadnej metody w interfejsie API.

Czy to możliwe (bez elementów sterujących), a jeśli tak, to w jaki sposób?

Answer 1

Może spojrzeć na to podobne pytanie. Wygląda to tak, jakby to może pracować dla Ciebie (przy użyciu javascript pełnoekranowego interfejsu API zamiast API YouTube):

Full Screen Option in Chromeless player using Javascript?

Answer 2

Można spróbować ustawić wymiar iframe do wymiaru okna przez JavaScript.

Coś jak to (przy użyciu jQuery):

$('ytplayer').attr('width', $(window).width()); 
$('ytplayer').attr('height', $(window).height()); 

Mam nadzieję, że to może pomóc.

Answer 3

Dodałem kod do pełnoekranowego (prawdziwy pełny ekran, nie pełne okno) do mojej odpowiedzi na Auto-Full Screen for a Youtube embed.

YouTube nie wyświetla pełnoekranowego interfejsu API, ale można wywołać funkcję natywnej przeglądarki requestFullScreen() z zdarzenia playerStateChange() z interfejsu API YouTube lub utworzyć własny niestandardowy przycisk odtwarzania, tak jak ja.

Answer 4

Można używać HTML5 pełnoekranowy API:

node.requestFullScreen(); 
document.cancelFullScreen(); 
document.fullScreen; // bool 

Należy jednak pamiętać, że:

• to zwykle wymaga specyficznych prefiks sprzedawca jak mozRequestFullScreen() lub webkitRequestFullScreen
• requestFullScreen musi być wywołana na zdarzenia użytkownika (jak onclick)
• w firefox - pełny ekran będzie czarny dopóki "Allow" nie zostanie kliknięty przez użytkownika

Answer 5

Patrząc na odniesienie API dla odtwarzacza iframe, nie sądzę, że to możliwe, aby ustawić go w trybie pełnoekranowym (z samym iframe API) - ctrl f nie wybrać na pełnym ekranie, więc albo to tajemnica sposób ukryty w interfejsie API lub nie istnieje. Jednak, jak zapewne wiesz, możesz ustawić rozmiar odtwarzacza player.setSize(width:Number, height:Number):Object, a następnie ustawić window fullscreen.

Answer 6

To zadziałało idealnie w moim przypadku. można znaleźć więcej szczegółów na ten link: demo on CodePen

var player, iframe; 
var $ = document.querySelector.bind(document); 

// init player 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
    height: '200', 
    width: '300', 
    videoId: 'dQw4w9WgXcQ', 
    events: { 
     'onReady': onPlayerReady 
    } 
    }); 
} 

// when ready, wait for clicks 
function onPlayerReady(event) { 
    var player = event.target; 
    iframe = $('#player'); 
    setupListener(); 
} 

function setupListener(){ 
$('button').addEventListener('click', playFullscreen); 
} 

function playFullscreen(){ 
    player.playVideo();//won't work on mobile 

    var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; 
    if (requestFullScreen) { 
    requestFullScreen.bind(iframe)(); 
    } 
}