Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как ограничить область видео по заданному контуру в ZeroBlock Tilda

Как ограничить область видео по заданному контуру в ZeroBlock Tilda

1
Создали ZeroBlock
2
Добавили в него элемент HTML и задали ему класс my_video
Вставили в него первый код
3
Добавили в него элемент Imge с иконкой кнопки и задали ей класс video_mute
4
Добавили второй код в блок Т123

Генератор контура
Библиотека для примера

<video id="videozero" style="object-fit: cover;background-size: cover;  width: 100%; height: 100%;"  preload="auto" playsinline="" autoplay="" loop="" muted=""> 
<source src="https://310401.selcdn.ru/MIXED/jason-derula-take-you-dancing_360p.mp4" type="video/mp4"> 
</video>

<style>
.my_video div.tn-atom__html{
    width: inherit;
    height: inherit;
    -webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    -ms-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.video_mute {
    filter: grayscale(1) opacity(0.8);
    transform: scale(0.8);
    transition: transform 0.3s linear;
    cursor:pointer;
}
.video_mute_off{
    filter: grayscale(0) opacity(1);
    transform: scale(1);
}
.video_mute_off .tn-atom{
    filter: grayscale(0) opacity(1);
    transform: scale(1);
    animation: spin-btn 3s infinite linear;
}
@keyframes spin-btn {
  0%   {transform: rotate(0deg)   }
  100% {transform: rotate(360deg) }
}

</style>

<script>
$( document ).ready(function() {
let zeroVideo=document.getElementById('videozero');
$('.video_mute').click(function() {
zeroVideo.volume=0.6;
$(this).toggleClass('video_mute_off');
if($(zeroVideo).prop('muted')){
    $(zeroVideo).prop('muted', false);
}else{
    $(zeroVideo).prop('muted', true);
};
});
});    
</script>
Made on
Tilda