Как кастомизировать кнопку play vimeo?

Для кастомизации кнопки Play на вставленном видео Vimeo существует несколько способов. Один из самых простых подходов - использование параметров URL-адреса встроенного видео Vimeo. Это позволяет управлять внешним видом кнопки Play, включая ее цвет и размер.

Для начала, получите код для вставки видео Vimeo на вашей веб-странице. Обычно это выглядит примерно так:

<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Замените VIDEO_ID на фактический идентификатор видео Vimeo.

Теперь, чтобы кастомизировать кнопку Play, добавьте параметры URL-адреса к коду вставки видео. Вы можете использовать параметр player_id, чтобы сделать кнопку Play настраиваемой. Например:

<iframe src="https://player.vimeo.com/video/VIDEO_ID?player_id=my-player-id" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Затем добавьте следующий CSS-код на вашу веб-страницу, чтобы задать стили для кнопки Play:

#my-player-id .vp-controls {
  opacity: 0.8;
  /* Другие настройки стиля */
}

#my-player-id .vp-controls .vp-controls__right {
  color: red;
  /* Другие настройки стиля */
}

#my-player-id .vp-controls .vp-controls__right svg {
  width: 30px;
  height: 30px;
  /* Другие настройки стиля */
}

Где my-player-id - это идентификатор player_id из кода вставки видео.

В примере выше, мы использовали CSS-селекторы, чтобы выбрать родительский элемент кнопки Play (vp-controls), правую часть кнопки (vp-controls__right) и элемент SVG в кнопке (svg). Здесь вы можете изменять свойства стиля, такие как opacity, color, width, height, чтобы полностью кастомизировать внешний вид кнопки Play.

Несмотря на то, что этот подход предоставляет простой способ кастомизации кнопки Play на видео Vimeo, применение CSS-стилей на плеере Vimeo имеет некоторые ограничения из-за политик безопасности браузера. Если вам требуется точное управление над кнопкой Play, вам может потребоваться использовать API Vimeo, чтобы создать собственную кнопку Play с полной кастомизацией.