Как включить звук у видео своей кнопкой в Tilda
 
You Learn
ONLY THIS WEEKEND
Dance

Как включить звук у видео своей кнопкой в Tilda

1
Создали Zero и добавили в него элемент HTML
2
Задали ему класс video-autoplay и вставили в него первый код
3
В коде заменили ссылку от видео на свою
https://310401.selcdn.ru/MIXED/startvideo.mp4
Как загружать видео
4
Добавили второй код на страницу в блок Другое - Т123
В коде заменили ссылки на свои иконки
https://static.tildacdn.com/tild3063-3636-4530-a538-623836373565/1486506271-music-mut.svg
https://static.tildacdn.com/tild3133-6633-4634-a132-306563396234/1486485571-198high-l.svg
Библиотека для примера

<div class="video-wr">
<video width="100%" height="100%" webkit-playsinline="" playsinline="" loop="" muted=""  autoplay="">
   <source src="https://310401.selcdn.ru/MIXED/startvideo.mp4" type="video/mp4">
</video>
</div>

<script>
$(document).ready(function(){
    $('.video-wr').click(function(){
        let vol = $(this);
        $('.video-wr').not(this).removeClass('unmute-mode');
        vol.toggleClass('unmute-mode');
        $('video').prop("muted", true);
        if (vol.is('.unmute-mode'))  {
            vol.find('video').prop("muted", false);
            vol.find('video')[0].currentTime = 0;    
        }            
    });
});
</script>

<style>
.video-autoplay .tn-atom__html , .video-wr {height: inherit}

.video-wr:before, .video-wr:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background-repeat: no-repeat;
    background-size: 55px;
    background-position: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
/*Отключить звук*/
.video-wr:before {
    background-image: url(https://static.tildacdn.com/tild3063-3636-4530-a538-623836373565/1486506271-music-mut.svg);
    opacity: 0;
}
/*Вкключить звук*/
.video-wr:after {
    background-image: url(https://static.tildacdn.com/tild3133-6633-4634-a132-306563396234/1486485571-198high-l.svg);
    opacity:0.5;
}
.video-wr:hover:after { opacity: 1} 

.unmute-mode.video-wr:after { opacity: 0 !important} 
.unmute-mode.video-wr:hover:before { opacity: 1} 

</style>
Made on
Tilda