:picture-in-picture
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
La pseudo-classe CSS :picture-in-picture cible les éléments qui sont présentement affichés en incrustation vidéo (picture-in-picture).
Syntaxe
:picture-in-picture {
/* ... */
}
Notes d'utilisation
La pseudo-classe :picture-in-picture permet de configurer les feuilles de style pour ajuster automatiquement la taille, la mise en forme ou la disposition du contenu lorsqu'une vidéo passe de l'incrustation vidéo à l'affichage normal et réciproquement.
Exemples
Dans cet exemple, la boîte de la vidéo aura une ombre portée rouge ou non selon qu'elle est affichée en incrustation vidéo ou non.
HTML
La page HTML ressemble à ceci :
<h1>Démonstration du MDN Web Docs: la pseudo-classe :picture-in-picture</h1>
<p>
Cette démonstration utilise la pseudo-classe <code>:picture-in-picture</code>
pour changer automatiquement le style d'une vidéo entièrement à l'aide de CSS.
</p>
<video id="pip-video"></video>
L'élément <video> avec l'ID "pip-video" changera entre avoir une ombre portée rouge ou non, selon qu'il est affiché ou non dans la fenêtre flottante d'incrustation vidéo.
CSS
La magie opère dans le CSS.
:picture-in-picture {
box-shadow: 0 0 0 5px red;
}
Spécifications
| Specification |
|---|
| Selectors Level 4 # pip-state |
Compatibilité des navigateurs
Loading…