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

问题

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.

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/26456453/how-to-add-a-button-to-play-youtube-video-full-screen-using-javascript