YouTube iframe player - wyzwalanie trybu pełnoekranowego w systemie iOS

Question

Korzystanie z odtwarzacza YouTube iframe embed, czy istnieje sposób, aby aktywować program pełnoekranowy? Chcę usunąć domyślne formanty (używając formantów = 0), ale mam możliwość samodzielnego utworzenia własnego przycisku pełnego ekranu.

Answer 1

Wykorzystaj iframe nie fullscreen ale FullPage:

function fullscreen() { 
 
     var vid = document.getElementById("vid"); 
 
     vid.style.position = "absolute"; 
 
     vid.style.width = "100vw"; 
 
     vid.style.height = "100vh"; 
 
     vid.style.top = "0px"; 
 
     vid.style.left = "0px"; 
 
     document.getElementById("exit").style.display = "inline"; 
 
    } 
 
    function exitfullscreen() { 
 
     var vid = document.getElementById("vid"); 
 
     vid.style.position = ""; 
 
     vid.style.width = ""; 
 
     vid.style.height = ""; 
 
     vid.style.top = ""; 
 
     vid.style.left = ""; 
 
     document.getElementById("exit").style.display = "none"; 
 
    }

<iframe width="560" height="315" src="https://www.youtube.com/embed/fq6qcvfZldE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" id="vid" allowfullscreen></iframe> 
 
    <button onClick="fullscreen()">Fullscreen</button> 
 
    <button style="position: fixed; 
 
        bottom: 5px; 
 
        right: 5px; 
 
        display: none; 
 
        z-index: 2000;" id="exit" onClick="exitfullscreen()">Exit Fullscreen</button>

pełna strona przycisk w prawym górnym rogu fragmentu kodu działa również w ten sposób. Jeśli chcesz ustawić przeglądarkę na pełnym ekranie, możesz wypróbować document.requestFullscreen();, ale to wciąż jest eksperymentalne i działa w niewielu przeglądarkach. Spójrz na temat tej funkcji pod numerem MDN.

EDYCJA: Właśnie znalazłem: https://developers.google.com/youtube/?csw=1#player_apis, oficjalny interfejs API odtwarzacza youtube.

Answer 2

Spróbuj wykonać następujące czynności w przeglądarkach WebKit:

if (typeof iframe.webkitRequestFullScreen === 'function') { 
    button.addEventListener('click', function() { 
     iframe.webkitRequestFullScreen(); 
    }, false); 
} 

Należy pamiętać, że to nie będzie działać bez gestu użytkownika (w tym przypadku „kliknięcie”).

Answer 3

Możesz użyć tej biblioteki XCDYouTubeKit zamiast odtwarzacza iframe.
Jest bardzo prosty i wydajny. Obsługuje tryb pełnoekranowy, a także tryb pełnoekranowy.