Reproductor de iframe de YouTube: activar pantalla completa en iOS

Question

Al utilizar el reproductor de incrustación iframe de YouTube, ¿hay alguna forma de activar la pantalla completa programáticamente? Quiero eliminar los controles predeterminados (usando controles = 0) pero luego tengo la capacidad de crear un botón de pantalla completa personalizado por sí mismo.

Answer 1

Hacer el iframe no pantalla completa, pero 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>

El página completa botón en la esquina superior derecha del fragmento de código también funciona de esta manera. Si quieres hacer que el navegador sea de pantalla completa, puedes probar document.requestFullscreen();, pero esto sigue siendo experimental y funciona en muy pocos navegadores. Eche un vistazo al tema MDN de esta función.

EDITAR: Acabo de encontrar esto: https://developers.google.com/youtube/?csw=1#player_apis, la API oficial de jugador de youtube.

Answer 2

intente lo siguiente en los navegadores WebKit:

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

Tenga en cuenta que esto no funcionará sin un gesto de usuario (en este caso, 'clic').

Answer 3

Puede usar esta biblioteca XCDYouTubeKit en lugar de iframe player.
Es muy simple y potente. Admite pantalla completa y no a pantalla completa.