<script>
document.addEventListener("DOMContentLoaded", function(){


function createTable(){
    let contain = false;
    if(document.querySelectorAll('.js-store-prod-all-charcs').length){
        let pElem = document.querySelectorAll('.js-store-prod-all-charcs p');
        for (let i = 0; i < pElem.length; i++) {
            let row = pElem[i].innerText
            row = row.split(':');
            let tag = row[0];
            if( tag=='#video'){
                pElem[i].classList.add('hide-chrs');
                let vLink = row[1]+':' + row[2];;
                console.log(vLink);
                
                let product = $(pElem[i]).closest('.js-store-product');
                let galleryWrap = product.find('.t-store__prod-popup__gallery-column');
                let tmbGall = $(pElem[i]).closest('.js-store-product').find('.t-slds');

                let slidesCol  = tmbGall.find('.t-slds__items-wrapper').attr('data-slider-totalslides');
                

                let lastComponent = galleryWrap.find('.t-store__prod-popup__wrapper:last');
                
                let vDeo = `<video class="box ratio-container js lazyloaded" width="100%" height="auto" autoplay="" muted="" playsinline="" loop="">
                                <source src="${vLink.trim()}" type="video/mp4">
                            </video>`;
                

                //$(lastComponent).clone().appendTo(galleryWrap);
                
                galleryWrap.find('.t-store__prod-popup__wrapper:eq(1)').html(vDeo);
                
                tmbGall.find('.t-slds__item[data-slide-index="2"] .t-slds__bgimg').addClass('hide-bg').html(vDeo);
                tmbGall.find('.t-slds__thumbsbullet[data-slide-bullet-for="2"] .t-slds__bgimg').addClass('hide-bg').html(vDeo);

                let target = tmbGall.find('.t-slds__items-wrapper')[0];
                let observer = new MutationObserver(function (mutations) {
                    mutations.forEach(function (mutation) {
                        let newVal = $(mutation.target).prop(mutation.attributeName);
                        if (mutation.attributeName === "class") {
                            
                            let videoLn = product.find('video').length;
                            
                            for(let i=0; i<videoLn; i++){
                                product.find('video').get(i).play();
                            };
                            
                	    };  
                });
                });
                observer.observe( target , {  attributes: true});

                
                
                
                
                
            }else{
                pElem[i].classList.add('show-chrs');
            };
        };
        
    };
}; 
    

setTimeout(function () {
    if(document.querySelectorAll('.t-store__product-snippet').length)  createTable();
}, 1500);




document.addEventListener('click', function(e){
    let prodElem = e.target.closest('a[href*="/tproduct/"]');
    if (prodElem != null) { 
        setTimeout(function () {  createTable() }, 1000);
    };
});

});
</script>

<style>

.js-store-prod-all-charcs p,
.js-store-prod-all-charcs p.hide-chrs{
    display: none;
}

.js-store-prod-all-charcs p.show-chrs {
    display: block;
}

video.box {
    margin: 35px 0;
        max-height: 90vh;
}


.t-slds__item video.box,
.t-slds__thumbsbullet video.box
{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin: 0;
}

.hide-bg{
    background-image: none !important;
}

@media screen and (max-width: 980px){

.t-store__prod-popup__gallery-column.t-store__prod-popup__col_fixed>div {
    display: none;
}
.t-store__prod-popup__gallery-column.t-store__prod-popup__col_fixed>div:last-child {
    display: block;
}

.t-store__product-popup>div,
.t-store__product-snippet>.t-container>div
{
    display:flex;
    flex-direction:column;
} 

.t-store__prod-popup__slider{
    order:-1;
}
}




</style>