1

I'm trying to have a YouTube video on my web page start in full screen mode. Since the YouTube API doesn't have a full screen call directly, I'm trying to get a YouTube video to start in fullscreen mode by calling a requestFullScreen function on the iframe itself as seen in this codepen.

loadYoutubeAPI is called on document ready. This is the button that calls playIntroVideo(). 

a href="javascript:void(0);" onclick="playIntroVideo()"

Here is my iframe (generated by YouTube API and my function) and the functions that generate it.

<iframe id="player" frameborder="0" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&amp;origin=http%3A%2F%2Flocalhost%3A3000&amp;widgetid=1"></iframe>


function loadYoutubeAPI() {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

function onYouTubeIframeAPIReady() {

}

var player;
function playIntroVideo() {
    player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE',
        events: {
        'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    $('#player').attr("allowfullscreen", "true");
    var iframe = ($('#player'));
    event.target.playVideo();
    var requestFullScreen = iframe.requestFullscreen || iframe.msRequestFullscreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullscreen;
    if (requestFullScreen) {
        requestFullScreen.bind(iframe)();
    }
}

The video plays as requested but does not go full screen. Checking the different requestFullscreens in Chrome's dev tools reveals they are all undefined. However, there are countless examples of people calling requestFullscreen on iframes so I don't understand why mine isn't working.

Nick Gilbert
  • 4,159
  • 8
  • 43
  • 90

2 Answers2

2

Have you tried adding the allowFullScreen="true" attribute to the iframe html? (from: Cant switch to fullscreen mode from an iframe) --- looks like without this set, an iframe can't be made to go full screen (https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe)

Community
  • 1
  • 1
Andrew Serong
  • 309
  • 4
  • 7
  • Thats what this line does $('#player').attr("allowfullscreen", "true"); I checked and its adding it – Nick Gilbert Oct 21 '16 at 20:01
  • 1
    Just had a bit of a play, and I managed to access the `.requestFullscreen()` method by initialising the iframe variable with plain-old javascript instead of jQuery: (`var iframe = document.getElementById("player");`) Then, I had to move the fullscreen code to a button click handler. I didn't have much luck with overriding the click on Youtube video though, unfortunately. Personally, I'd try covering the video area with a poster image that's the 'button' that then fires off the code to run the iframe in fullscreen. – Andrew Serong Oct 22 '16 at 06:03
  • Thats what I'm doing. I have a play button thats supposed to fired the iframe in full screen mode – Nick Gilbert Oct 25 '16 at 14:23
  • This answer: http://stackoverflow.com/a/36129309/5865554 on http://stackoverflow.com/questions/15114884/make-youtube-video-fullscreen-using-iframe-and-javascript-api has a working Codepen example if it helps. – Andrew Serong Oct 26 '16 at 00:47
  • I follow @AndrewSerong suggestion to change JQuery with plain Javascript: var iframe = document.getElementById("player"); and it works like a charm. – Wild Teddy Apr 14 '22 at 08:26
2

Instead of just selecting the iframe's jQuery object, try selecting the DOM element by appending [0] or .get(0)

function onPlayerReady(event) {
    var iframe = $('#player')[0];
    ...
}

Also, just in case you were setting custom parameters to your YouTube player instantiation, make sure that 'fs' is set to 1 instead of 0.

function playIntroVideo() {
    player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE',
        playerVars: {
          fs: 1
        },
        events: {
        'onReady': onPlayerReady
        }
    });
}
pmancia
  • 76
  • 3