YouTube iframe player - trigger fullscreen on iOS

Question

Using the YouTube iframe embed player, is there a way to trigger fullscreen programatically? I want to remove the default controls (using controls=0) but then have the ability to create custom fullscreen button by itself.

Answer 1

Make the iframe not fullscreen but 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>

The full page button in the right upper corner of the code snippet also works this way. If you want to make the browser full screen you could try document.requestFullscreen();, but this is still experimental and works on very few browsers. Take a look at the MDN topic of this function.

EDIT: Just found this: https://developers.google.com/youtube/?csw=1#player_apis, the official youtube player API.

Answer 2

You can use this library XCDYouTubeKit instead of iframe player.
Its very simple and powerful. Supports full-screen as well as non full-screen.

Answer 3

Try the following in Webkit browsers:

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

Note that this won't work without a user gesture (in this case, 'click').