Flowplayer HTML5 Fullscreen on Play

Question

I've got Flowplayer up and running on a WordPress installation, and am trying to change the behavior of the player to enter fullscreen mode upon the user hitting the play button.

I have the following JavaScript in my footer:

flowplayer(function (api, root) {
    api.bind("resume", function(e, api, video) {

        api.fullscreen();

    });
});

But, alas, the player will not toggle into fullscreen mode. I know there is a limitation with fullscreen that it can only be called when the user does an action, but isn't the 'resume' event a user-created action?

I have confirmed the code is sound by testing its behavior with the mute function, which worked as expected.

Answer 1

I was able to implement a solution to this that I thought I would share in case people were looking in the future.

flowplayer(function (api, root) {

  api.bind("load", function () {
     jQuery('div.flowplayer').addClass("is-fullscreen");

  }).bind("fullscreen-exit", function(e, api) {
     jQuery('div.flowplayer').addClass("is-fullscreen");

 });; 
});

Essentially I start the player in a windowed fullscreen mode (similar to how a Netflix video begins playing in the browser). The user then can choose to make the video 'true' fullscreen. This worked great, but I noticed when the user exited 'true' fullscreen, FP didn't revert to windowed fullscreen, which is why I re-add the 'is-fullscreen' class on the fullscreen-exit event.

Hope this helps in the future!