PlayFullscreen on button click

[nagen1]

Hi,
Thanks for the directive and it works awesome 👍
And I am wondering how can change the player extension when user clicks on Play button it should auto play in fullscreen. was able to get it worked with JS with script tags in my player since I am using angular was facing few bugs with it and started looking into this extensions which works pretty neat.

the below code which i used to play full screen on button click.

function playFullscreen() {
            //iframe.css("visibility", "visible");
            player.playVideo();//won't work on mobile
            var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
            if (requestFullScreen) {
                requestFullScreen.bind(iframe)();
            }

appreciate if we can added it in this directive or how should I include it in my controller so that I can achieve fullscreen on play button

Reference

<script> var player, iframe; var playnow = document.querySelector.bind(document); // init player function onYouTubeIframeAPIReady(vart) { player = new YT.Player('player', { height: '200', width: '300', videoId: '123455987', //events: { // 'onReady': onPlayerReady //} }); } // when ready, wait for clicks //function onPlayerReady(event) { // var player = event.target; // iframe = playnow('#player'); // //setupListener(); //} //function setupListener() { // playnow('button').addEventListener('click', playFullscreen); //} //$("#testvid").click(function () { // $("#player").show(); // if (player) { // var fn = function(){ // playFullscreen(); // } // } //}); //function playFullscreen() { // //iframe.css("visibility", "visible"); // player.playVideo(); // var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; // if (requestFullScreen) { // requestFullScreen.bind(iframe)(); // } //} </script>

[brandly]

hey! it looks like there's a player.getIframe() method you could use. read more here.

you could probably do something like

$scope.$on('youtube.player.ready', function ($event, player) {
  player.playVideo();
  var iframe = player.getIframe()
  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)()
  }
})

i haven't actually tried running that code, but it should help you head in the right direction. good luck and let me know if there's anything else i can clear up! 🌟

[nagen1]

Thanks for quick reply Brandly.
when I tried with the above it shows me below error. just wondering why don't mind if it's a basic question though, I am a beginner :)
Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

then I tried to put button click event and all together failed in achieving it :( as I mentioned before it works for me as a <script> tag in the moviedetails template but when I navigate and try to load other video it doesn't works. like >> Home page >> Click on poster >> click on play button >> it works >> go back click other movie poster >> click on play button it doesn't plays/in fullscreen.

this is how my controller looks like. solution much appreciated.

`(function () {
'use strict';

// Controller name is handy for logging
var controllerId = 'moviedetailsController';

// Point to the controller definition function.
angular.module('apptest').controller(controllerId, ['moviedetails', '$scope', '$routeParams', moviedetailsController]);

function moviedetailsController(moviedetails, $scope, $routeParams) {
    var vm = this;
    vm.id = $routeParams.id;

    moviedetails.get({ id: vm.id }, function (data) {
        var poster = data.playLink.split("=");
        var temp = poster[1].split("&");
        var posterpath = "http://img.youtube.com/vi/" + temp[0] + "/movieposter.jpg";
        var vid = "https://www.youtube.com/embed/" + temp[0] + "?enablejsapi=1&widgetid=1";
        var ytid = temp[0];
        // https://www.youtube.com/embed/-y2_eJFYZbo?enablejsapi=1&widgetid=1
        data.poster = posterpath;
        data.vid = vid;
        data.ytid = ytid;
        vm.data = data;
    })

    $scope.$on('youtube.player.ready', function ($event, player) {
        console.log(event.data);
            player.playVideo();
            var iframe = player.getIframe()
            var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen
            if (requestFullScreen) {
                requestFullScreen.bind(iframe)()
        }
    })
}

})();`

[fabn]

Got the same error. Any solution?

[brandly]

API can only be initiated by a user gesture sounds like you need to do it directly off a user-initiated event, like a click or something.

i tried reproducing the error and seeing if a click event would fix thing, but i couldn't even produce the error. here's a JSFiddle: https://jsfiddle.net/rhofknqg/2/

if someone could fork that to produce the error, that'd be great!

[aashkafirst]

How to make this work on mobile, I mean the player goes full screen on button click?
The above code is not working on mobile.