`:picture-in-picture` - Sélecteur CSS

:picture-in-picture

Résumé des caractéristiques du sélecteur `:picture-in-picture`

Description rapide

Pseudo classe désignant un élément (le plus souvent une vidéo) affiché dans une fenêtre ne défilant pas avec le reste de la page.

Statut

Problèmes de compatibilité ⚠

Module W3C

Sélecteurs

Références (W3C)

Selectors Level 4

Statut du document: WD (document de travail)

Pseudo-classe `:picture-in-picture` - Description

La pseudo-classe :picture-in-picture cible les vidéos affichés dans le mode "Picture-in-picture", ce qui pourrait se traduire en français par "flottant" ou "épinglé". Ce mode d'affichage consiste à afficher la vidéo dans une fenêtre superposée à la page et qui ne défile pas avec la page. L'utilisateur peut donc visualiser la vidéo tout en continuant de parcourir la page, comme dans l'exemple ci-après.

Le passage en mode picture-in-picture peut se faire par du code Javascript suivant l'exemple ci-dessous :


	function enterPiP(id) {
	   document.getElementById(id).requestPictureInPicture();
	}
	function exitPiP() {
	   document.exitPictureInPicture();
	}

Pseudo-classe `:picture-in-picture` - Exemples d'utilisation.

Les styles appliqués sur :picture-in-picture s'activent lorsque la fenêtre vidéo est en mode picture-in-picture. Toutes les propriétés ne sont pas appicables dans ce contexte.

Cet exemple ne fonctionnera peut-être pas sur votre navigateur, la prise en charge par les navigateurs étant encore insuffisante.

Pseudo-classe `:picture-in-picture` - Compatibilité des navigateur.

La pseudo-classe :picture-in-picture pose encore de nombreux problèmes de compatibilité, y compris avec certains des navigateurs les plus utilisés.²

Colonne 1

Support d'une technique consistant à créer une fenêtre flottante pour les vidéos, de façon à ce qu'elles puissent être regardées même si l'utilisateur fait scroller la page.

Colonne 2

Support du sélecteur :picture-in-picture ciblant les vidéos qui sont actuellement dans ce mode.