:picture-in-picture - Sélecteur CSS
Résumé des caractéristiques du sélecteur :picture-in-picture
Description de la pseudo-classe :picture-in-picture.
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();
}
Exemples d'utilisation de :picture-in-picture.
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.
Compatibilité des navigateurs.
La pseudo-classe :picture-in-picture pose encore de nombreux problèmes de compatibilité, y compris avec certains des navigateurs
les plus utilisés.²
:picture-in-pictureNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi : pseudo-classes relatives à l'état d'affichage.
:open::closed::modal::fullscreen::picture-in-picture:
Pseudo-classe désignant un élément pouvant être soit ouvert, soit fermé, comme
Pseudo-classe désignant un élément pouvant être soit ouvert, soit fermé, comme un menu
Pseudo-classe désignant les éléments qui bloquent les interactions avec les autres éléments.
Pseudo-classe désignant les éléments affichés en plein écran.
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.