TelegramVkontakteMessengerSkype
Как поставить свою иконку на Video YouTube в ZeroBlock в Tilda

Как поставить свою иконку на Video YouTube в ZeroBlock в Tilda

1
Создали ZeroBlock и добавили в него VIdeo
2
Задали для этого видео постер
3
Добавили стиль в блок Т123
В стиле указали ссылку на иконку
background-image: url(https://static.tildacdn.com/tild3436-3638-4962-b266-653136663363/786430.svg);
Библиотека для примера

<style>
.tn-atom__video-play-icon {
    position: relative;
}
.tn-atom__video-play-icon svg {
    display: none;
}
 .tn-atom__video-play-icon::after {
    content: "";
    background-image: url(https://static.tildacdn.com/tild3436-3638-4962-b266-653136663363/786430.svg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.tn-atom__video-play-icon:hover {
    transform: scale(1.3);
}
</style>
Как поставить свою иконку на Video html в ZeroBlock в Tilda
1
Создали ZeroBlock и добавили в него addHtml
2
Вставили код плеера в этот элемент
3
Добавили стиль и код блок Т123
Библиотека плеера

<div class="wrapper">
<video class="video" width="100%" height="100%" playsinline  poster="https://static.tildacdn.com/tild3131-3664-4361-b138-313462653231/SThbq5HITPGo0EqOSGsC.png">
   <source src="https://310401.selcdn.ru/MIXED/y2mate.com%20-%20Concentrate%20Your%20Mind%20%E2%98%AF%20Asian%20Lofi%20HipHop%20Mix_X1uaOtiJ9Vc_v720P.mp4" type="video/mp4">
 </video>
  <div class="playbtn"></div>
  <div style="display:none" class="stopbtn"></div>
</div>
Стиль и код

<style>
    .wrapper{
    display:table;
    width:auto;
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius: 470px 0px;
}
.playbtn {
    background-image:url(https://static.tildacdn.com/tild3533-3263-4130-b734-353765393339/907754.svg);
    background-repeat:no-repeat;
    width:20%;
    height:20%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
    cursor: pointer;
}
.stopbtn {
    background-image:url(https://static.tildacdn.com/tild3638-3366-4935-b238-666132343965/786479.svg);
    background-repeat:no-repeat;
    width: 12%;
    height: 12%;
    position: absolute;
    left: 0%;
    bottom: 20px;
    margin: auto;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}
</style>

<script>
 $( document ).ready(function() {
    $('.video').parent().click(function () {
  if($(this).children(".video").get(0).paused){       
   $(this).children(".playbtn").fadeOut();$(this).children(".stopbtn").fadeIn();
   $(this).children(".video").get(0).play();   
    }else{      
    $(this).children(".stopbtn").fadeOut();$(this).children(".playbtn").fadeIn();
    $(this).children(".video").get(0).pause();
    }
});
});
</script>
Made on
Tilda