Geek Answers Handbook

How to add a button to play fullscreen video on YouTube using JavaScript?

I encode the Google Chrome extension where I embed a video on YouTube:

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

Then I added a button below, which should allow the user to click to play this video in full screen:

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

The work is done through 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 function is playVideo undefinedfor playerElement.

Any idea what I'm doing wrong?

PS. I want my player to stay in HTML5.

+4
source share
2 answers

, Youtube API. PHP &autoplay=1 src <iframe>. , , scr , , , , & ?. , .

HTML :

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

, :

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

, , Qaru , JSFiddle, CodePen .., .

+3

YouTube iFrame , YouTube Iframe Api

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

iframe

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


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

YouTube

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

, .

0

More articles:


All Articles