Listes de lecture de style

Dans cette rubrique, vous apprendrez à styliser des listes de lecture.

Aperçu

Si vous souhaitez modifier l'apparence des listes de lecture, vous pouvez le faire en utilisant CSS. Dans ce document, vous verrez un certain nombre de styles que vous pouvez modifier. Bien entendu, les changements possibles sont nombreux et vous devez trouver le bon sélecteur pour accomplir votre tâche.

Styliser une liste de lecture verticale

Le diagramme suivant résume les styles modifiés pour une liste de lecture verticale. Le diagramme suit un tableau qui répertorie les styles.

Contrôle de la couleur du texte de la liste de lecture .vjs-mouse.vjs-playlist {
  color: #E9D2B3;
}
Contrôler la couleur des
espaces entre les éléments de la liste de lecture
.vjs-mouse.vjs-playlist {
  background-color: #161D6E;
}
Contrôle de la couleur du texte de durée .vjs-playlist .vjs-playlist-duration {
  color: #9BB4DA;
}
Contrôle de la couleur de l'arrière-plan de la durée .vjs-playlist .vjs-playlist-duration {
  background-color: #1160AA;
}
Espace de contrôle entre les éléments de la liste de lecture .vjs-playlist-vertical .vjs-playlist-item {
  margin-top: 20px; }

Styliser une liste de lecture horizontale

Le diagramme suivant résume les styles modifiés pour une liste de lecture horizontale. Le diagramme suit un tableau qui répertorie les styles.

Contrôle de la couleur du texte de la liste de lecture .vjs-mouse.vjs-playlist {
  color: #E9D2B3;
}
Contrôler la couleur des
espaces entre les éléments de la liste de lecture
.vjs-mouse.vjs-playlist {
  background-color: #161D6E;
}
Contrôle de la couleur du texte de durée .vjs-playlist .vjs-playlist-duration {
  color: #9BB4DA;
}
Contrôle de la couleur de l'arrière-plan de la durée .vjs-playlist .vjs-playlist-duration {
  background-color: #1160AA;
}
Espace de contrôle entre les éléments de la liste de lecture .vjs-playlist-horizontal .vjs-playlist-item {
  marge gauche: 5px; }

Masquer la barre de défilement

Une barre de défilement sur la liste de lecture horizontale n'est pas nécessaire, mais apparaîtra. Si vous souhaitez masquer la barre de défilement, le style suivant fait exactement cela:

div.vjs-playlist.vjs-playlist-horizontal {
  overflow-y: hidden;
}

Les captures d'écran suivantes montrent la barre de défilement apparaissant dans la liste de lecture, puis elle est masquée: