How to add a button to play YouTube video full screen using JavaScript?

Question

I'm coding a Google Chrome extension where I embed a YouTube video:

<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE"
frameborder="0" allowfullscreen>

I then added a button below that should allow a user to click to play this video in full screen:

<a href="#" id="lnkFullScreen">Play full screen</a>

The work is done via JavaScript (and jQuery) using the code I found here:

$("#lnkFullScreen").click(function(e)
{
    e.stopPropagation();
    e.preventDefault();

    var playerElement = document.getElementById("ytplayer");

    playerElement.playVideo();   //`playVideo` is undefined

    var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
    if (requestFullScreen)
    {
        requestFullScreen.bind(playerElement)();
    }
});

But when I run this code the playVideo function is undefined for playerElement.

Any idea what am I doing wrong?

PS. I want my player to remain in HTML5.

not enough rep to comment. this might help http://stackoverflow.com/questions/7615380/auto-full-screen-for-a-youtube-embed — codemonkeytony, Oct 19 '14 at 23:18
@codemonkeytony: I quoted that same link in my question. Is there something specific you want to point out there? — c00000fd, Oct 19 '14 at 23:20
Well if nothing else you could just modify the width and height. — Jonathon, Oct 20 '14 at 00:04

score 4 · Accepted Answer · edited May 27 '15 at 18:55

4

There is a little trick to do this without the Youtube API. You can add the PHP variable &autoplay=1 to the src attribute of your <iframe>. Before adding it, check if the scr attribute has already other variables attached, and, if so, add it using & instead of ?. Then open the player in fullscreen, and you're done.

Your HTML structure will be something like:

<iframe id="player" type="text/html" width="640" height="360"
        src="http://www.youtube.com/embed/M7lc1UVf-VE"
        frameborder="0" allowfullscreen>
</iframe>
<br/>
<a href="#" id="play-fullscreen">Play full screen</a>

And here is the code you need:

var fullscreen = document.getElementById('play-fullscreen'),
    player = document.getElementById('player');

fullscreen.addEventListener('click', function (e) {
    if (~player.src.indexOf('?')) player.src += '&autoplay=1';
    else player.src += '?autoplay=1';

    var req = player.requestFullscreen
        || player.webkitRequestFullscreen
        || player.mozRequestFullScreen
        || player.msRequestFullscreen;

    req.call(player);
    e.preventDefault();
});

Unfortunately I can't provide you a working example, because Stack Overflow and tools like JSFiddle, CodePen etc don't allow frames running in their code snippets.

edited May 27 '15 at 18:55

codealliance_dev

3
2

answered Oct 20 '14 at 15:01

Marco Bonelli

63,369
21
118
128

Very nice. Thank you. Can I ask, where did you take that `req` property from? Is it documented? – c00000fd Oct 20 '14 at 22:13
Also for whoever doesn't want it to auto-play, don't add `autoplay=1` part. – c00000fd Oct 20 '14 at 22:14
@c00000fd I created that req property. I assigned to the req property the function of fullscreen. By the way the "autoplay=1" part is necessary if you want to play the video when the user clicks on "Play fullscreen". – Marco Bonelli Oct 20 '14 at 22:18
Hmm. Interesting. If I declare it as a standalone variable, for instance `var req = player.requestFullscreen || ...` it doesn't work. It must be a property of the `player` object. I don't understand that part. – c00000fd Oct 20 '14 at 23:43
@c00000fd you can also define it as another variable, but then you will need to use `req.call(player)` to change the `this` object of `req` ([see `Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)), because it's a function that uses the `this` variable. I edited my answer, now it looks clearer. – Marco Bonelli Oct 20 '14 at 23:49
Oh, I see. Yeah it makes sense now. If I declare it as a local variable, the `this` part will be `undefined`. Thanks for clearing it all out. Still, is it an undocumented stuff? – c00000fd Oct 20 '14 at 23:53
@c00000fd Javascript has no official documentation, but the Mozilla Developer Network is the most complete unofficial documentation, for example see [`Element.requestFullscreen`](https://developer.mozilla.org/en-US/docs/Web/API/Element.requestFullScreen) – Marco Bonelli Oct 20 '14 at 23:55
Quick note for those who want to use it in IE. It doesn't seem to work there. The window is maximized but the player stays small. – c00000fd Oct 21 '14 at 22:13

score 0 · Answer 2 · answered Oct 29 '16 at 09:29

For the full screen on YouTube iFrame First of all you have to use the YouTube Iframe Api By Adding

<script src="https://www.youtube.com/iframe_api"></script>

Include iframe as

 <iframe id="youtube_videos_url" allowfullscreen="1" class="video-js vjs-default-skin"
              src="http://www.youtube.com/embed/8xXrbKJSp6w?wmode=opaque&enablejsapi=1&version=3&autoplay=0&controls=0" frameborder="0">
      </iframe>

For Button

<button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>

Then the code for full-screen the YouTube Video

$(document).ready(function () {
    var player = new YT.Player('youtube_videos_url');
    $('#fs').on('click', function () {
        player.playVideo();
        var $$ = document.querySelector.bind(document);
        var iframe = $$('#youtube_videos_url');
        var req = iframe.requestFullscreen
                || iframe.webkitRequestFullscreen
                || iframe.mozRequestFullScreen
                || iframe.msRequestFullscreen;
        req.call(iframe);
    });
});

I hope with this function will help you.

How to add a button to play YouTube video full screen using JavaScript?

2 Answers2

Linked