Кастомизация иконки запуска (play) в видео Zero Block на Tilda

2024-12-15 18:47 Видео Кнопки

При добавлении обложки к видео в Zero Block часто возникает необходимость настроить внешний вид кнопки запуска. В стандартном функционале Тильды такой возможности нет. Однако с помощью этой модификации вы сможете изменить цвет иконки и фона кнопки или показать собственное изображение вместо стандартной кнопки Play.

Изменение цвета кнопки play

Добавляем видео в зеро блок и устанавливаем обложку;
Копируем код в HTML блок T123;
Указываем свой цвет для фона и иконки;

<!--TICODE --><!-- Смена стилей иконки play | https://ticode.dev  -->
<style>
.tn-atom__video-play-icon circle {
    fill: #ff8562 !important; /* Цвет фона иконки */
}
.tn-atom__video-play-icon path {
  fill: #ffffff !important; /* Цвет стрелки */
}
</style>

Вывод своей иконки вместо стандартной

Добавляем видео в зеро блок и устанавливаем обложку;
Копируем код в HTML блок T123;
Создаем блок IM01, загружаем через контент свою иконку (размер 70 на 70 Px). Нажимаем ПКМ на картинку, копируем адрес изображения и вставляем ссылку в код. Сам блок с иконкой можно скрыть, но не удалять;

<!--TICODE --><!-- Смена стилей иконки play | https://ticode.dev  -->
<style>
  .tn-atom__video-play-icon {
    width: 70px;
    height: 70px;
    background-image: url('ссылка на вашу иконку');
    background-size: cover;
    background-position: center;
    border-radius: 50%; /* Процент скругления иконки */
  }

  .tn-atom__video-play-icon circle {
    display: none;
  }
  .tn-atom__video-play-icon path {
  display: none;
}
</style>

Вместо блока IM01 вы можете использовать любой другой блок для загрузки изображения. Можно загрузить иконку в любой Zero Block, вынести её за пределы видимости и скопировать ссылку. Главное, чтобы изображение было загружено на сайт, чтобы получить доступ к его URL.

Другие модификации для видео на Тильда

Видео на фон в Zero Block: модификация для добавления видео на фон в зеро блок с поддержкой мобилок
Конструктор видео в Zero Block: расширяем функционал видео в зеро блок на Тильда
Скругление углов в видео: модификация для скругления углов видео в Zero Block.

{$co}

TiCode