Le plein écran facile avec l'API Fullscreen

L'API Fullscreen standard maintenu par le WhatWG vous permet de faire en sorte qu'un élément de votre page web, quel qu'il soit, occupe tout l'espace disponible de l'écran. Cela peut être utile pour les vidéos en plein écran bien entendu mais également les jeux, ou toute autre application qui nécessite un affichage en plein écran sans nécessairement être constituée de vidéo.

Pour utiliser l'API Fullscreen, vous devez d'abord vérifier que le navigateur prend en charge cette fonctionnalité. Vous pouvez le faire en utilisant la propriété fullscreenEnabled de l'objet document :

if (document.fullscreenEnabled) {
  // Le navigateur prend en charge l'API Fullscreen
} else {
  // Le navigateur ne prend pas en charge l'API Fullscreen
}

Si le navigateur prend en charge l'API Fullscreen, vous pouvez ensuite faire en sorte qu'un élément de votre page web passe en mode plein écran en utilisant la méthode requestFullscreen() :

const element = document.querySelector('#ma-video');
element.requestFullscreen();

Dans cet exemple, nous avons récupéré l'élément en question par un sélecteur et nous avons appelé la méthode requestFullscreen().

Il est important de noter que l'internaute doit accepter de passer en mode plein écran avant que cela se produise. Le navigateur affichera une notification demandant si l'internaute souhaite passer en mode plein écran ou non. Si l'internaute refuse, la méthode "requestFullscreen" ne fera rien.

Inversement, il existe une méthode exitFullscreen() pour quitter le plein écran.

Pour détecter l'acceptation ou le refus de passer en mode plein écran, vous pouvez écouter l'événement fullscreenchange toujours sur l'objet document :

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    // Accord de passer en mode plein écran
  } else {
    // Refus de passer en mode plein écran
  }
});

Dans cet exemple, nous avons ajouté un écouteur d'événement sur l'événement fullscreenchange. Lorsque l'événement se produit, nous vérifions si l'objet fullscreenElement de l'objet document est défini. Si c'est le cas, cela signifie que l'utilisateur a accepté de passer en mode plein écran.

Pseudo-élément ::backdrop

L'API est accompagnée d'un pseudo-élément ::backdrop qui est rendu immédiatement sous l'élément en plein écran, ce qui permet de créer un arrière-plan sombre, un ombrage ou toute autre fantaisie qui va recouvrir le document d'origine lorsqu'on est en mode plein écran.

Pour utiliser le pseudo-élément ::backdrop, il suffit de l'ajouter à la feuille de styles.

#ma-video:fullscreen::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

Pseudo-classe :fullscreen

L'API est également complétée par une pseudo-classe :fullscreen qui va correspondre dynamiquement à tout élément passé en plein écran.