::cue

Псевдоэлемент::cue позволяет стилизовать текст субтитров и других текстовых дорожек, отображаемых внутри элемента <video>. Эти дорожки подключаются с помощью тега <track>. С помощью ::cue вы можете менять цвет, размер шрифта, фон и другие свойства субтитров, чтобы сделать их более читаемыми или соответствующими дизайну вашего сайта.

        
          
          <video controls src="video.mp4">  <track default kind="captions" srclang="ru" src="subtitles.vtt">  Ваш браузер не поддерживает встроенные видео</video>
          <video controls src="video.mp4">
  <track default kind="captions" srclang="ru" src="subtitles.vtt">
  Ваш браузер не поддерживает встроенные видео
</video>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          video {  width: 100%;}video::cue {  font-size: 1rem;  color: yellow;}::cue(b) {  color: red;}
          video {
  width: 100%;
}

video::cue {
  font-size: 1rem;
  color: yellow;
}

::cue(b) {
  color: red;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Синтаксис псевдоэлемента ::cue:

        
          
          /* Стилизация всех субтитров */::cue {  /* стили */}/* Стилизация конкретных элементов внутри субтитров */::cue(b) {  /* стили для жирного текста в субтитрах */}
          /* Стилизация всех субтитров */
::cue {
  /* стили */
}

/* Стилизация конкретных элементов внутри субтитров */
::cue(b) {
  /* стили для жирного текста в субтитрах */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Псевдоэлемент ::cue можно использовать двумя способами:

1. Без селектора — ::cue — применяет стили ко всем репликам сразу.
2. С селектором — ::cue(тег) — позволяет стилизовать конкретные теги внутри субтитров (b, i, u, ruby и другие).

• ::cue без селектора применяет стили ко всем репликам (отдельным блокам текста) субтитров сразу. Например, если вы установите color: yellow, то весь текст всех субтитров станет жёлтым.
  Важное исключение: свойства фона (background, background-*) применяются к каждой реплике отдельно, чтобы фон одной реплики не перекрывал другие реплики или слишком большую область видео.

• ::cue(<селектор>) позволяет выбрать и стилизовать внутренние части реплики, которые помечены тегами в самом файле субтитров (.vtt). Например, в вашем файле субтитров может быть строка <i>Привет</i> мир. С помощью ::cue(i) вы можете стилизовать только слово «Привет». Этот селектор работает только с тегами внутри субтитров, а не с HTML-элементами на самой странице.

Внутри ::cue разрешён ограниченный набор свойств:

• background, background-*
• color
• шрифтовые свойства: font, font-*
• outline, outline-*
• ruby-position
• text-combine-upright
• text-decoration, text-decoration-*
• text-shadow
• visibility
• white-space

💡 Для читабельности субтитров соблюдайте контраст: светлый текст на тёмной полупрозрачной плашке или наоборот.
💡 Не переусердствуйте с декоративностью: сложные шрифты и насыщенные эффекты ухудшают восприятие.
💡 Поддержка ::cue(<селектор>) может отличаться: в некоторых браузерах он недоступен. Всегда проверяйте поддержку для нужного браузера.
💡 С помощью ::cue вы можете управлять длиной строки и интерлиньяжем, чтобы субтитры хорошо читались на разных языках. Например, для русского текста часто требуется больший размер шрифта, чем для английского, а для длинных слов может пригодиться свойство word-break. Используйте white-space и line-height, чтобы текст не выглядел скученным.