Кнопка с popup-видео для Tilda Zero Block

3 июл. 2022 г.

2 минуты374 слова

Кнопка с всплывающим видео для Tilda

Создаем блок VD09

Создаем блок VD09 (popup с видео) и в настройках присваиваем ему ссылку #popup:youtubevideo. Эту ссылку мы будем использовать для открытия всплывающего окна с видео. Не забываем внутри блока добавить ссылку на youtube-ролик или его ID.

Вставляем код в Zero Block

Открываем наш Zero Block и добавляем область с HTML кодом.

Уменьшаем блок с кодом и располагаем на экране в нужном нам месте, вставляем в него код для анимированной кнопки.

Код с анимированной кнопкой для вставки в блок

<style>
  .video-play-button {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    background: #881414;
    border-radius: 50%;
    padding: 8px 10px 8px 18px;
  }
 
  .video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: #b41818;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
  }
 
  .video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 50px;
    height: 50px;
    background: #b41818;
    border-radius: 50%;
    transition: all 200ms;
  }
 
  .video-play-button:hover:after {
    background - color: darken(#fa183d, 10%);
  }
 
  .video-play-button img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto;
  }
 
  .video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 22px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-top: 10px;
    margin-left: 3px;
  }
 
  @keyframes pulse-border {
    0 % {
      transform: translateX(-50 %) translateY( - 50 %) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }
</style>
 
<a id="play-video" class="video-play-button" href="#popup:youtubevideo">
  <span></span>
</a>

Обратите внимание на тег ссылки, в нем должна быть якорная ссылка на блок popup с видео, который мы создали в самом начале.

Сохраняем, переопубликовываем страницу и проверяем работоспособность.

Все должно работать)