Using fullscreen

As a library developer, there are two ways you can add fullscreen support to your content type.

1. The simplest way is to just set the fullscreen property in your library.json to 1, like so:
   

   {
     ...
     "runnable": 1,
     "fullscreen": 1,
     ...
   }

   
   This will enable the default fullscreen button that is integrated with H5P. It will be put on top of your content.
   
   
2. The second way is to create your own full-screen button and use H5P's fullscreen API when clicking it.
   

   // First we check if full screen is supported
   if (H5P.canHasFullScreen !== false) {
   
     // We create a function that is used to enter or 
     // exit full screen when our button is pressed
     var toggleFullScreen = function () {
       if (H5P.isFullscreen) {
         H5P.exitFullScreen();
       }
       else {
         H5P.fullScreen($myContainer, this);
       }
     };
   
     // Create the custom full screen button
     var $fullScreenButton = $('<button/>', {
       'class': 'h5p-my-fullscreen-button',
       title: params.l10n.enterFullScreen,
       on: {
         click: toggleFullScreen
       },
       appendTo: $myContainer
     });
   
     // Respond to enter full screen event
     this.on('enterFullScreen', function () {
       $fullScreenButton.attr('title', params.l10n.exitFullScreen);
     });
   
     // Respond to exit full screen event
     this.on('exitFullScreen', function () {
       $fullScreenButton.attr('title', params.l10n.enterFullScreen);
     });
   }
   

   
   Events must be used to detect if the browser enters or exits fullscreen mode. This is in case there are multiple fullscreen buttons, or if the user presses the ESC-key to exit the fullscreen.
   
   When full screen is enabled your $container will automatically get the h5p-fullscreen or h5p-semi-fullscreen class, which you can use for custom styling.
   
   

   /* Full screen button styling */
   .h5p-my-content .h5p-my-fullscreen-button {
     color: blue;
     content: "o";
   }
   
   /* Full screen enabled styling */
   .h5p-my-content.h5p-fullscreen .h5p-my-fullscreen-button,
   .h5p-my-content.h5p-semi-fullscreen .h5p-my-fullscreen-button {
     color: pink;
     content: "x";
   }
   

   
   Semi-fullscreen is a solution used when normal fullscreen isn't available in the browsers. In the time of writing such a solution is only one available on iPad.