2012-09-11 39 views
11

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.Reproductor de iframe de YouTube: activar pantalla completa en iOS

+0

Puede probar y examinar las vistas secundarias UIWebView para una clase AVPlayer, y poner su capa a pantalla completa – atrebbi

Respuesta

4

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.

1

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').

0

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

+0

No veo cómo responde a la pregunta – Lefteris

+0

No :) es simplemente una solución alternativa de lo que quiere lograr (y probablemente sea la forma más rápida y fácil) – arturdev

Cuestiones relacionadas