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=";amp;origin=http%3A%2F%2Flocalhost%3A3000&amp;widgetid=1"></iframe>


function loadYoutubeAPI() {
    var tag = document.createElement('script');
    tag.src = "";
    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.

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./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./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.

• javascript
• jquery
• ruby-on-rails
• iframe
• youtube

2 Answers 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/en/docs/Web/HTML/Element/iframe)

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
        }
    });
}