При добавлении обложки к видео в 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.
