Video mezi náhledové fotky produktu

CSS

.p-thumbnails-wrapper .p-thumbnails .p-thumbnails-inner a img {
max-width: 100px;
}
.p-thumbnails-horizontal .p-thumbnail.video-thumbnail:before {
content: "" !important;
display: block !important;
width: 50px;
height: 50px;
background-color: #ffffffa6;
position: absolute;
border-radius: 100%;
top: 25px;
left: 25px;
background-image: url("/user/documents/upload/video/play_button.svg");
background-size: cover;
}
.p-main-image video {width:100%;}
.p-short-description video {display:none;}

@media (max-width: 767px) {
.p-thumbnails-wrapper .p-thumbnails .p-thumbnails-inner a img {
height: 80px;
width: auto;
}
.p-thumbnails-wrapper .p-thumbnails, .p-thumbnails-wrapper .p-thumbnails>div {
height: 80px;
}
.p-thumbnails-horizontal .p-thumbnail.video-thumbnail:before {
width: 40px;
height: 40px;
top: 20px;
left: 20px;
}
}

Scripty:

<script>
$(function(){
const $main = $('.p-main-image');
const originalHTML = $main.html();

function getVideoEl(){ return $('.p-short-description video'); }
function getVideoSrc(){
const $v = getVideoEl();
return $v.attr('src') || $v.find('source').attr('src') || $v.attr('data-src') || $v.find('source').attr('data-src') || '';
}
function hideShortDescVideo(){ getVideoEl().hide(); }

function getThumbContainer(){
const $inner = $('.p-thumbnails-inner');
const $wrap = $inner.children('div').first();
return $wrap.length ? $wrap : $inner;
}

function ensureVideoThumb(){
if ($('.p-thumbnails-inner .video-thumbnail').length) return;
const src = getVideoSrc();
if (!src) return;
const $firstImg = $('.p-thumbnails-inner .p-thumbnail img').first();
const fallbackImg = $firstImg.attr('data-src') || $firstImg.attr('src') || '';
const $thumb = $('<a href="#" class="p-thumbnail video-thumbnail" aria-label="Product Video"><span class="play-badge"></span></a>');
if (fallbackImg){
$thumb.append('<img alt="Product Video" width="100" height="100" loading="lazy">');
$thumb.find('img').attr('src', fallbackImg).attr('data-src', fallbackImg);
}
getThumbContainer().prepend($thumb);
}

function showVideo(){
const src = getVideoSrc();
if (!src) return;
const $video = $('<video playsinline controls autoplay muted style="max-width:100%;height:auto;"><source type="video/mp4"></video>');
$video.find('source').attr('src', src);
$main.html($video);
}

function showImageFromThumb($a){
const href = $a.attr('href') || '';
const src = $a.find('img').attr('data-src') || $a.find('img').attr('src') || '';
$main.html(originalHTML);
if (href) $main.attr('href', href);
if (src) $main.find('img').attr('src', src);
}

function bindClicks(){
$('.p-thumbnails-inner').off('click.videoThumb').on('click.videoThumb','.p-thumbnail',function(e){
e.preventDefault();
const $a = $(this);
$('.p-thumbnails-inner .p-thumbnail').removeClass('highlighted');
$a.addClass('highlighted');
if ($a.hasClass('video-thumbnail')) showVideo(); else showImageFromThumb($a);
});
}

function init(){
hideShortDescVideo();
bindClicks();
ensureVideoThumb();
}

init();

const observeTarget = $('.p-thumbnails-inner')[0];
if (observeTarget){
const observer = new MutationObserver(function(){
hideShortDescVideo();
ensureVideoThumb();
bindClicks();
});
observer.observe(observeTarget, {childList:true, subtree:true});
}

const iv = setInterval(function(){
if (getVideoSrc()){
hideShortDescVideo();
ensureVideoThumb();
clearInterval(iv);
}
},300);
});
</script>