Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

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

Оформить доступ с промокодом

100

#2470a1

Как добавить видео в галерею GL27 в Tilda

Unchained Melody

Is a 1955 song with music by Alex North and lyrics by Hy Zaret. North wrote the music as a theme for the little-known prison film Unchained (January 1955),[1] hence the song title. Todd Duncan sang the vocals for the film soundtrack.

Learn More
Todd Duncan

Unchained Melody (Original) 1955

YouTube link
The Righteous Brothers versions

The best-known version of "Unchained Melody" was recorded by the duo The Righteous Brothers for Philles Records in 1965. The lead vocal was performed solo by Bobby Hatfield, who later recorded other versions of the song credited solely to him. According to his singing partner Bill Medley, they had agreed to do one solo piece each per album. Both wanted to sing "Unchained Melody" for their fourth album, but Hatfield won the coin toss.

Learn More
Righteous Brothers

Unchained Melody (1965)

YouTube link
Elvis Presley version

On June 21, 1977, Elvis Presley performed the song at a show in Rapid City, South Dakota. The performance, described as "the last great moment of his career", was recorded for his last television special two months before his death in August 1977

Learn More
Elvis Presley

Unchained Melody

YouTube link
Righteous Brothers | Unchained Melody [From the Movie Ghost]

"Unchained Melody" reappeared on the US Billboard charts in 1990 after The Righteous Brothers' recording was used in the box office blockbuster film Ghost. Two versions charted in the US that year – the original and a new recording. Although Hatfield's voice was no longer as good as when he first recorded the song, they decided to re-record it for Curb Records. The re-recorded version was released as both a cassette single and a CD single. It received minimal airplay but sold well, peaking at number 19. The re-recorded version was certified Platinum by the RIAA on January 10, 1991, and received a Grammy Award nomination.

Learn More
Righteous Brothers | Unchained Melody [From the Movie Ghost] 1990

YouTube link

Как добавить видео в галерею GL27 в Tilda

Создали GL27 на 8 карточек

отступ полосы прогресса 50рх
стиль галереи - Полноэкранная версия

Добавили код в блок Другое - Т123
В коде указали номер слайда и ссылку на видео

'2' : 'https://310401.selcdn.ru/MIXED/unchained_melody2.mp4',
'4' : 'https://310401.selcdn.ru/MIXED/unchained_melody1.mp4',
'6' : 'https://310401.selcdn.ru/MIXED/unchained_melody3.mp4',
'8' : 'https://310401.selcdn.ru/MIXED/unchained_melody4.mp4'

Как загрузить MP4 или WEBM видео?

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Добавляем видео в блок GL27.
Заливаем файл на dropbox.
Длительность видео: 10 мин

Фрагмент видео

Посмотреть видео в личном кабинете ►

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

<script>
$(document).ready(function(){
let playList = {
  '2' : 'https://310401.selcdn.ru/MIXED/unchained_melody2.mp4',
  '4' : 'https://310401.selcdn.ru/MIXED/unchained_melody1.mp4',
  '6' : 'https://310401.selcdn.ru/MIXED/unchained_melody3.mp4',
  '8' : 'https://310401.selcdn.ru/MIXED/unchained_melody4.mp4'
};
for (var key in playList) {
    $('.t994__item-wrapper:eq('+(+key-1)+') .t994__content').before('<div class="t994__video-wrapper"><video class="t994__video" style="object-fit: cover;background-size: cover;  width: 100%; height: 100%;"  preload="auto" playsinline=""  loop="" muted="muted"><source src="'+playList[key]+'"></video><div class="t994__video-btn"></div><div class="t994__video-btn-mute"></div></div>');
};
let videoNum = $('.t994__video').length;
function pauseVideo(){
    $('.t994__video').each(function( index ) {
        let thisVideo = $(this);
        if (  $(this).get(0).played ) $(this)[0].pause(); 
        thisVideo.siblings('.t994__video-btn-mute').removeClass('mute_show');
    });
    $('.t994__video-btn').removeClass('playbtn_hide');
    setTimeout(function(){
        let findVideo = $('.t994__item.t-slds__item_active').find('video');
        if ( findVideo.length ){
            findVideo.next('.t994__video-btn').addClass('playbtn_hide');
            findVideo[0].play();
            findVideo.siblings('.t994__video-btn-mute').addClass('mute_show'); 
        };
    }, 100);    
};
$('.t994__item-wrapper').on('click' , '.t994__video-btn-mute' ,function(e){ 
    $('.t994__video').prop('muted', false); 
    $('.t994__video-btn-mute').addClass('mute_dis');
});
$('.t994__content, .t994__video-btn').click(function(){
    let videoLn = $(this).closest('.t994__item-wrapper').find('video');
    if( videoLn.length ){
        if (  videoLn.get(0).paused ) {
            videoLn.next('.t994__video-btn').addClass('playbtn_hide');
            videoLn.get(0).play();
            videoLn.siblings('.t994__video-btn-mute').addClass('mute_show');
        } else {
            videoLn.next('.t994__video-btn').removeClass('playbtn_hide');
            videoLn.get(0).pause();
            videoLn.siblings('.t994__video-btn-mute').removeClass('mute_show'); 
        }
    };
});
setTimeout(function(){
    $('.t994__item:first video')[0].play();
}, 1000);

let slideline = document.querySelector('.t994__slidecontainer');
var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var newVal = $(mutation.slideline).prop(mutation.attributeName);
        if (mutation.attributeName === "data-slide-pos") { pauseVideo()};  
});
});
observer.observe( slideline , {  attributes: true});
});
</script>

<style>
.t994__video-wrapper { 
    width: 100%; 
    height: 100%;
    position:absolute;
}
.t994__video-btn , .t994__video-btn-mute {
    width: 60px;
    height: 60px;
    background-image: url(https://static.tildacdn.com/tild6465-3064-4962-b733-383664376338/Group_8.svg);
    position: absolute;
    left: 50%;
    top: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s ease-in-out;
}
.t994__video-btn-mute{
    display:none;
    background-image: url(https://static.tildacdn.com/tild3938-6263-4461-b031-363134353565/volume_1.svg);
}
.playbtn_hide{opacity:0}
.t994__video-btn:hover {transform: translateX(-50%) translateY(-50%) scale(1.1)}
.mute_show{display:block}
.mute_dis{display:none !important}

</style>

Если 2 галереи

Код 1

<script>
$(document).ready(function(){

(function () {    
    
    let vidSlider1 = $('.uc-video-slider-1');
        
    let playList = {
      '2' : 'https://310401.selcdn.ru/MIXED/unchained_melody2.mp4',
      '4' : 'https://310401.selcdn.ru/MIXED/unchained_melody1.mp4',
      '6' : 'https://310401.selcdn.ru/MIXED/unchained_melody3.mp4',
      '8' : 'https://310401.selcdn.ru/MIXED/unchained_melody4.mp4'
    };
    for (var key in playList) {
        vidSlider1.find('.t994__item-wrapper:eq('+(+key-1)+') .t994__content').before('<div class="t994__video-wrapper"><video class="t994__video" style="object-fit: cover;background-size: cover;  width: 100%; height: 100%;"  preload="auto" playsinline=""  loop="" muted="muted"><source src="'+playList[key]+'"></video><div class="t994__video-btn"></div><div class="t994__video-btn-mute"></div></div>');
    };
    let videoNum = vidSlider1.find('.t994__video').length;
    function pauseVideo(){
        vidSlider1.find('.t994__video').each(function( index ) {
            let thisVideo = $(this);
            if (  $(this).get(0).played ) $(this)[0].pause(); 
            thisVideo.siblings('.t994__video-btn-mute').removeClass('mute_show');
        });
        vidSlider1.find('.t994__video-btn').removeClass('playbtn_hide');
        setTimeout(function(){
            let findVideo = vidSlider1.find('.t994__item.t-slds__item_active video');
            if ( findVideo.length ){
                findVideo.next('.t994__video-btn').addClass('playbtn_hide');
                findVideo[0].play();
                findVideo.siblings('.t994__video-btn-mute').addClass('mute_show'); 
            };
        }, 100);    
    };
    vidSlider1.find('.t994__item-wrapper').on('click' , '.t994__video-btn-mute' ,function(e){ 
        vidSlider1.find('.t994__video').prop('muted', false); 
        vidSlider1.find('.t994__video-btn-mute').addClass('mute_dis');
    });
    vidSlider1.find('.t994__content, .t994__video-btn').click(function(){
        let videoLn = $(this).closest('.t994__item-wrapper').find('video');
        if( videoLn.length ){
            if (  videoLn.get(0).paused ) {
                videoLn.next('.t994__video-btn').addClass('playbtn_hide');
                videoLn.get(0).play();
                videoLn.siblings('.t994__video-btn-mute').addClass('mute_show');
            } else {
                videoLn.next('.t994__video-btn').removeClass('playbtn_hide');
                videoLn.get(0).pause();
                videoLn.siblings('.t994__video-btn-mute').removeClass('mute_show'); 
            }
        };
    });
    setTimeout(function(){
        vidSlider1.find('.t994__item:first video')[0].play();
    }, 1000);
    
    let slideline1 = vidSlider1.find('.t994__slidecontainer')[0];
    
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            var newVal = $(mutation.slideline1).prop(mutation.attributeName);
            if (mutation.attributeName === "data-slide-pos") { pauseVideo()};  
    });
    });
    observer.observe( slideline1 , {  attributes: true});


})();    
    
});
</script>

<style>
.t994__video-wrapper { 
    width: 100%; 
    height: 100%;
    position:absolute;
}
.t994__video-btn , .t994__video-btn-mute {
    width: 60px;
    height: 60px;
    background-image: url(https://static.tildacdn.com/tild6465-3064-4962-b733-383664376338/Group_8.svg);
    position: absolute;
    left: 50%;
    top: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s ease-in-out;
}
.t994__video-btn-mute{
    display:none;
    background-image: url(https://static.tildacdn.com/tild3938-6263-4461-b031-363134353565/volume_1.svg);
}
.playbtn_hide{opacity:0}
.t994__video-btn:hover {transform: translateX(-50%) translateY(-50%) scale(1.1)}
.mute_show{display:block}
.mute_dis{display:none !important}

</style>

Если 2 галереи

Код 2

<script>
$(document).ready(function(){

(function () {    
    
    let vidSlider2 = $('.uc-video-slider-2');
        
    let playList = {
      '2' : 'https://310401.selcdn.ru/MIXED/unchained_melody2.mp4',
      '4' : 'https://310401.selcdn.ru/MIXED/unchained_melody1.mp4',
      '6' : 'https://310401.selcdn.ru/MIXED/unchained_melody3.mp4',
      '8' : 'https://310401.selcdn.ru/MIXED/unchained_melody4.mp4'
    };
    for (var key in playList) {
        vidSlider2.find('.t994__item-wrapper:eq('+(+key-1)+') .t994__content').before('<div class="t994__video-wrapper"><video class="t994__video" style="object-fit: cover;background-size: cover;  width: 100%; height: 100%;"  preload="auto" playsinline=""  loop="" muted="muted"><source src="'+playList[key]+'"></video><div class="t994__video-btn"></div><div class="t994__video-btn-mute"></div></div>');
    };
    let videoNum = vidSlider2.find('.t994__video').length;
    function pauseVideo(){
        vidSlider2.find('.t994__video').each(function( index ) {
            let thisVideo = $(this);
            if (  $(this).get(0).played ) $(this)[0].pause(); 
            thisVideo.siblings('.t994__video-btn-mute').removeClass('mute_show');
        });
        vidSlider2.find('.t994__video-btn').removeClass('playbtn_hide');
        setTimeout(function(){
            let findVideo = vidSlider2.find('.t994__item.t-slds__item_active video');
            if ( findVideo.length ){
                findVideo.next('.t994__video-btn').addClass('playbtn_hide');
                findVideo[0].play();
                findVideo.siblings('.t994__video-btn-mute').addClass('mute_show'); 
            };
        }, 100);    
    };
    vidSlider2.find('.t994__item-wrapper').on('click' , '.t994__video-btn-mute' ,function(e){ 
        vidSlider2.find('.t994__video').prop('muted', false); 
        vidSlider2.find('.t994__video-btn-mute').addClass('mute_dis');
    });
    vidSlider2.find('.t994__content, .t994__video-btn').click(function(){
        let videoLn = $(this).closest('.t994__item-wrapper').find('video');
        if( videoLn.length ){
            if (  videoLn.get(0).paused ) {
                videoLn.next('.t994__video-btn').addClass('playbtn_hide');
                videoLn.get(0).play();
                videoLn.siblings('.t994__video-btn-mute').addClass('mute_show');
            } else {
                videoLn.next('.t994__video-btn').removeClass('playbtn_hide');
                videoLn.get(0).pause();
                videoLn.siblings('.t994__video-btn-mute').removeClass('mute_show'); 
            }
        };
    });
    setTimeout(function(){
        vidSlider2.find('.t994__item:first video')[0].play();
    }, 1000);
    
    let slideline2 = vidSlider2.find('.t994__slidecontainer')[0];
    
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            var newVal = $(mutation.slideline2).prop(mutation.attributeName);
            if (mutation.attributeName === "data-slide-pos") { pauseVideo()};  
    });
    });
    observer.observe( slideline2 , {  attributes: true});


})();    
    
});
</script>

<style>
.t994__video-wrapper { 
    width: 100%; 
    height: 100%;
    position:absolute;
}
.t994__video-btn , .t994__video-btn-mute {
    width: 60px;
    height: 60px;
    background-image: url(https://static.tildacdn.com/tild6465-3064-4962-b733-383664376338/Group_8.svg);
    position: absolute;
    left: 50%;
    top: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s ease-in-out;
}
.t994__video-btn-mute{
    display:none;
    background-image: url(https://static.tildacdn.com/tild3938-6263-4461-b031-363134353565/volume_1.svg);
}
.playbtn_hide{opacity:0}
.t994__video-btn:hover {transform: translateX(-50%) translateY(-50%) scale(1.1)}
.mute_show{display:block}
.mute_dis{display:none !important}

</style>