Issue summary

*I was playing with triggering the requestFullscreen() today (triggering it from a js function), but I do encounter the “Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.” error.

This should not be a problem as the user will control everything (fullscreen, mute, pip) with button clicks.

Following this guide: https://javascript.plainenglish.io/user-gesture-restricted-web-apis-d794454453f7 I placed the requestFullscreen() within a click event listener. But I still get the same error.

Any suggestions on how to make this work (as the actions are, and will be, initiated by user gestures (button clicks))?*

The customer wants to make his player full screen when clicking on a specific HTML element.

Solution

We made this simple example that's working fine https://codesandbox.io/s/quizzical-jasper-0ulmbz?file=/src/index.js

N.B: You need to open this example in a new window to make it works.

⚠️ From our Player SDK documentation, in the requestFullscreen() section:

Request fullscreen mode (this may not work in some cases depending on browser restrictions)

Technical explanation

To make a player full screen with our PlayerSDK, you need to:

Install the @api.video/player-sdk package or include the SDK in your HTML file like this
Instantiate a new player

const sdk = new PlayerSdk("#target", {
    id: "<VIDEO_ID>", 
    // ... other optional options
});

// OR

<script type="text/javascript">
    window.sdk = new PlayerSdk("#target", { 
        id: "<VIDEO_ID>", 
        // ... other optional options 
    });
</script>

3. Make your player full screen by using his native method requestFullscreen() in a click event, binded on a button.

document.getElementById("button").addEventListener("click", () => {
  sdk.requestFullscreen();
});