▶
⏸
9.
Хирургическое лечение рака</h3>
<p class="video-desc">Ведущий эксперт в области хирургии рака желудочно-кишечного тракта, доктор медицинских наук Мартин Шиллинг, рассказывает о том, как современные хирургические методы значительно повышают выживаемость при колоректальном...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Keep your existing CSS and JavaScript exactly as is -->
<style>
/* MasterClass-style layout container */
.masterclass-layout {
display: grid;
gap: 0;
margin-top: 40px;
min-height: 600px;
}
/* Playlist container with independent scrolling */
.playlist-container {
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Header elements removed for cleaner look */
.playlist-header {
display: none;
}
.playlist-title {
display: none;
}
.playlist-count {
display: none;
}
.expert-video-playlist {
display: flex !important;
flex-direction: column !important;
gap: 8px;
padding: 16px;
max-height: 480px;
overflow-y: auto !important;
overflow-x: hidden;
/* Force scroll behavior */
min-height: 200px;
box-sizing: border-box;
}
/* Custom scrollbar styling */
.expert-video-playlist::-webkit-scrollbar {
width: 6px;
}
.expert-video-playlist::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.expert-video-playlist::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
.expert-video-playlist::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
.video-card {
display: flex;
gap: 16px;
cursor: pointer;
align-items: flex-start;
transition: all 0.3s ease;
padding: 12px;
border-radius: 8px;
border: 2px solid transparent;
/* Prevent text overflow */
overflow: hidden;
/* Increased minimum height for better thumbnail + text display */
min-height: 100px;
margin-bottom: 8px;
}
.video-card:hover {
background-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
}
.video-card.active {
background-color: rgba(255, 255, 255, 0.1);
border-color: #fff;
}
.video-card.playing {
border-color: #F51C1C;
background-color: rgba(245, 28, 28, 0.08);
position: relative;
}
.video-card.playing::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #F51C1C;
border-radius: 0 2px 2px 0;
z-index: 1;
}
@media (max-width: 768px) {
.video-card.playing::before {
width: 4px;
}
}
.video-card.active .video-title,
.video-card.playing .video-title {
color: #fff;
font-weight: 700;
}
.video-thumb {
position: relative;
width: 180px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
}
.thumb-img {
width: 100%;
height: auto;
display: block;
}
.play-button-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.7);
color: white;
font-size: 24px;
padding: 8px 12px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.video-thumb:hover .play-button-overlay,
.video-card.active .play-button-overlay {
opacity: 1;
}
.video-card.playing .play-button-overlay {
opacity: 0;
}
.video-card.playing .play-icon {
display: none;
}
.video-card.playing .playing-icon {
display: inline !important;
}
.video-meta {
flex: 1;
padding-top: 4px;
}
.video-title {
margin: 0 0 6px;
font-weight: 600;
font-size: 22px; /* Increased to 22px for much better desktop readability */
line-height: 1.3;
transition: color 0.3s ease;
/* Prevent title overflow on mobile */
word-wrap: break-word;
overflow-wrap: break-word;
}
.video-desc {
color: #ccc;
font-size: 18px; /* Increased to 18px for much better desktop readability */
line-height: 1.4;
margin: 0;
/* Prevent description overflow */
word-wrap: break-word;
overflow-wrap: break-word;
overflow: hidden;
}
.playlist-video-controls {
background: rgba(0, 0, 0, 0.9);
padding: 15px 0;
margin: 0 !important;
border-radius: 8px;
display: none;
position: relative;
z-index: 100;
}
.section-template {
padding-top: 12px !important;
margin-top: 0 !important;
}
@media (min-width: 768px) {
.section-template {
padding-top: 25px !important;
}
}
.playlist-controls-container {
display: flex;
align-items: center;
gap: 15px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.playlist-control-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
font-size: 16px;
cursor: pointer;
padding: 8px 12px;
border-radius: 4px;
transition: all 0.2s ease;
min-width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.playlist-control-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
.playlist-progress-container {
flex: 1;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
cursor: pointer;
position: relative;
}
.playlist-progress-bar {
height: 100%;
background: #fff;
border-radius: 3px;
width: 0%;
transition: width 0.1s ease;
}
.playlist-time {
color: white;
font-size: 14px;
min-width: 80px;
text-align: center;
}
/* DESKTOP: Full-width cards matching video area */
@media (min-width: 769px) {
.masterclass-layout {
grid-template-columns: 1fr;
max-width: 100%; /* Match video area width */
margin: 0;
}
.playlist-container {
max-width: none; /* Remove width restriction */
}
.expert-video-playlist {
max-height: 500px;
padding: 20px; /* More generous padding for desktop */
}
.video-card {
padding: 16px; /* Larger padding for desktop cards */
min-height: 120px; /* Desktop: taller cards for full thumbnails + 2 lines text */
}
.video-meta {
padding-left: 8px; /* Extra space for text */
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* MOBILE: Compact layout with minimal spacing */
@media (max-width: 768px) {
.masterclass-layout {
grid-template-columns: 1fr;
gap: 6px; /* Further reduced from 12px */
margin-top: 6px; /* Further reduced from 12px */
}
.playlist-container {
border-radius: 6px; /* Smaller radius */
margin: 0 -8px; /* Extend further to edges */
}
.expert-video-playlist {
max-height: 380px; /* Slightly taller for better content */
padding: 6px; /* Further reduced from 8px */
gap: 3px; /* Minimal gaps between cards */
}
.video-card {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.02);
/* Enhanced mobile overflow protection */
overflow: hidden;
padding: 10px;
min-height: 90px; /* Mobile: taller cards to show full title + some description */
}
.video-card:hover,
.video-card.active {
border-color: rgba(255, 255, 255, 0.3);
}
.video-thumb {
width: 120px;
flex-shrink: 0;
}
.video-meta {
flex: 1;
min-width: 0; /* Critical for text overflow */
padding-top: 4px;
}
.video-title {
font-size: 15px; /* Keep mobile size smaller for space constraints */
/* Mobile-specific overflow handling */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 4px;
}
.video-desc {
font-size: 13px;
/* Mobile-specific overflow handling */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; /* Increased back to 3 with taller cards */
-webkit-box-orient: vertical;
}
/* Mobile scrollbar styling */
.expert-video-playlist::-webkit-scrollbar {
width: 4px;
}
}
.playlist-controls-container {
gap: 10px;
padding: 0 15px;
}
.playlist-control-btn {
font-size: 14px;
min-width: 36px;
height: 36px;
padding: 6px 8px;
}
.playlist-time {
font-size: 12px;
min-width: 70px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM loaded, initializing enhanced playlist...');
initializeSelfContainedPlaylist();
});
function initializeSelfContainedPlaylist() {
const videoCards = document.querySelectorAll('.video-card');
console.log('Found', videoCards.length, 'video cards');
if (videoCards.length === 0) {
console.warn('No video cards found');
return;
}
waitForHeroVideo(function(heroVideo) {
console.log('Hero video found:', heroVideo);
createPlaylistControls(heroVideo);
setupSelfContainedVideoSwapping(videoCards, heroVideo);
});
}
function waitForHeroVideo(callback) {
let attempts = 0;
const maxAttempts = 20;
function checkForHeroVideo() {
const heroVideo = document.getElementById('hero-video');
attempts++;
if (heroVideo) {
callback(heroVideo);
} else if (attempts < maxAttempts) {
console.log('Waiting for hero video... attempt', attempts);
setTimeout(checkForHeroVideo, 250);
} else {
console.error('Hero video not found after', maxAttempts, 'attempts');
}
}
checkForHeroVideo();
}
function createPlaylistControls(heroVideo) {
const heroSection = document.querySelector('.hero') || document.querySelector('.video-parent-section');
if (!heroSection) {
console.error('Could not find hero section to insert controls');
return;
}
const controlsHTML = `
<div class="playlist-video-controls" id="playlist-video-controls">
<div class="playlist-controls-container">
<button class="playlist-control-btn" id="playlist-play-btn">▶</button>
<div class="playlist-progress-container" id="playlist-progress-container">
<div class="playlist-progress-bar" id="playlist-progress-bar"></div>
</div>
<div class="playlist-time" id="playlist-time">0:00 / 0:00</div>
<button class="playlist-control-btn" id="playlist-mute-btn">🔊</button>
<button class="playlist-control-btn" id="playlist-fullscreen-btn">⛶</button>
</div>
</div>
`;
heroSection.insertAdjacentHTML('afterend', controlsHTML);
console.log('Controls inserted after hero section');
setupPlaylistControlEvents(heroVideo);
}
function setupPlaylistControlEvents(heroVideo) {
const playBtn = document.getElementById('playlist-play-btn');
const muteBtn = document.getElementById('playlist-mute-btn');
const progressContainer = document.getElementById('playlist-progress-container');
const progressBar = document.getElementById('playlist-progress-bar');
const timeDisplay = document.getElementById('playlist-time');
const fullscreenBtn = document.getElementById('playlist-fullscreen-btn');
if (!playBtn) {
console.error('Could not find playlist controls');
return;
}
console.log('Setting up playlist control events');
playBtn.addEventListener('click', function() {
if (heroVideo.paused) {
heroVideo.play();
playBtn.textContent = '⏸';
} else {
heroVideo.pause();
playBtn.textContent = '▶';
}
});
muteBtn.addEventListener('click', function() {
heroVideo.muted = !heroVideo.muted;
muteBtn.textContent = heroVideo.muted ? '🔇' : '🔊';
});
progressContainer.addEventListener('click', function(e) {
const rect = progressContainer.getBoundingClientRect();
const pos = (e.clientX - rect.left) / rect.width;
heroVideo.currentTime = pos * heroVideo.duration;
});
fullscreenBtn.addEventListener('click', function() {
if (heroVideo.requestFullscreen) {
heroVideo.requestFullscreen();
} else if (heroVideo.webkitRequestFullscreen) {
heroVideo.webkitRequestFullscreen();
}
});
heroVideo.addEventListener('timeupdate', function() {
if (heroVideo.duration) {
const progress = (heroVideo.currentTime / heroVideo.duration) * 100;
progressBar.style.width = progress + '%';
const current = formatTime(heroVideo.currentTime);
const duration = formatTime(heroVideo.duration);
timeDisplay.textContent = current + ' / ' + duration;
}
});
function formatTime(seconds) {
if (!seconds || isNaN(seconds)) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return mins + ':' + (secs < 10 ? '0' : '') + secs;
}
}
function setupSelfContainedVideoSwapping(videoCards, heroVideo) {
const overlay = document.querySelector('.hero__text-wrap');
if (videoCards[0]) {
videoCards[0].classList.add('active');
}
videoCards.forEach(function(card, index) {
card.addEventListener('click', function() {
const videoSrc = card.getAttribute('data-video-src');
const videoTitle = card.getAttribute('data-video-title');
const posterUrl = card.getAttribute('data-poster');
console.log('Clicked video card:', videoTitle, 'Source:', videoSrc);
if (!videoSrc || videoSrc === '' || videoSrc === 'null') {
console.error('No valid video source found for:', videoTitle);
alert('Sorry, no video source found for "' + videoTitle + '". Please check if the video is properly uploaded or linked.');
return;
}
videoCards.forEach(function(c) {
c.classList.remove('active', 'playing');
});
card.classList.add('active', 'playing');
scrollToVideoPlayer();
// Hide overlay for all playlist videos (not hero)
if (overlay) {
overlay.style.opacity = '0';
setTimeout(function() {
overlay.style.display = 'none';
}, 300);
}
swapHeroVideoWithControls(heroVideo, videoSrc, videoTitle, posterUrl);
});
});
}
function scrollToVideoPlayer() {
const heroSection = document.querySelector('.hero') || document.querySelector('.video-parent-section');
if (heroSection) {
heroSection.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
} else {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
}
function swapHeroVideoWithControls(heroVideo, newSrc, title, posterUrl) {
console.log('Swapping to video with controls:', title, 'New source:', newSrc);
// ENHANCED overlay hiding with debugging
const overlay = document.querySelector('.hero__text-wrap');
console.log('Found overlay element:', overlay);
if (overlay) {
console.log('Current overlay styles - opacity:', overlay.style.opacity, 'display:', overlay.style.display);
overlay.style.opacity = '0 !important';
overlay.style.display = 'none !important';
overlay.style.visibility = 'hidden !important';
console.log('Overlay should be hidden now for:', title);
} else {
console.log('No overlay element found to hide');
}
try {
// Detect if a dubbed video card is present; if so, English hero should NOT autoplay
const hasDubbed = !!document.querySelector('[id^="emc-dubbed-iframe-"]');
// Skip pause for iframes - they don't have video methods
if (heroVideo.tagName !== 'IFRAME' && typeof heroVideo.pause === 'function') {
heroVideo.pause();
}
// Handle Vimeo URLs
if (newSrc.includes('vimeo.com')) {
console.log('Vimeo URL detected, handling specially:', newSrc);
// Extract Vimeo ID
let vimeoId = null;
if (newSrc.includes('player.vimeo.com/video/')) {
const match = newSrc.match(/player\.vimeo\.com\/video\/(\d+)/);
if (match) vimeoId = match[1];
} else if (newSrc.includes('vimeo.com/')) {
const match = newSrc.match(/vimeo\.com\/(\d+)/);
if (match) vimeoId = match[1];
}
if (vimeoId) {
console.log('Extracted Vimeo ID:', vimeoId);
// Update iframe with proper autoplay parameters
const auto = hasDubbed ? 0 : 1;
const muted = hasDubbed ? 0 : 1;
const newVimeoSrc = `https://player.vimeo.com/video/${vimeoId}?autoplay=${auto}&muted=${muted}`;
heroVideo.src = newVimeoSrc;
// Force iframe to full size
heroVideo.style.cssText = `
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
border: none !important;
`;
console.log('Updated iframe src to:', newVimeoSrc);
}
} else {
// Handle MP4 videos (complete the logic)
console.log('Regular MP4 video detected');
// Show video element if hidden
heroVideo.style.display = 'block';
// Ensure English hero will not autoplay and will show poster
heroVideo.autoplay = false;
heroVideo.removeAttribute('autoplay');
if (posterUrl) {
try { heroVideo.setAttribute('poster', posterUrl); } catch(e) {}
}
// Remove any Vimeo iframes
const existingIframe = heroVideo.parentElement.querySelector('.vimeo-iframe');
if (existingIframe && existingIframe !== heroVideo) {
existingIframe.remove();
}
// Clear existing sources
const existingSources = heroVideo.querySelectorAll('source');
existingSources.forEach(source => source.remove());
// Set new source
const newSource = document.createElement('source');
newSource.src = newSrc;
newSource.type = 'video/mp4';
heroVideo.appendChild(newSource);
heroVideo.src = newSrc;
heroVideo.load();
// Ensure English hero is not muted by default; it will be paused if dubbed exists
heroVideo.muted = false;
// Autoplay only if there is no dubbed video on the page (i.e., .com behavior)
if (!hasDubbed) {
heroVideo.addEventListener('canplay', function onCanPlay() {
heroVideo.removeEventListener('canplay', onCanPlay);
heroVideo.play().then(() => {
console.log('MP4 video playing successfully:', title);
}).catch(console.warn);
});
}
}
} catch (error) {
console.error('Error swapping video:', error);
}
}
function updatePlaylistControls(heroVideo) {
const playBtn = document.getElementById('playlist-play-btn');
const muteBtn = document.getElementById('playlist-mute-btn');
if (playBtn) {
playBtn.textContent = heroVideo.paused ? '▶' : '⏸';
}
if (muteBtn) {
muteBtn.textContent = heroVideo.muted ? '🔇' : '🔊';
}
}
// Enhanced debug function
setTimeout(function() {
const cards = document.querySelectorAll('.video-card');
console.log('=== ENHANCED DEBUG: Video Sources Analysis ===');
cards.forEach(function(card, i) {
const src = card.getAttribute('data-video-src');
const title = card.getAttribute('data-video-title');
const hasSource = src && src !== '' && src !== 'null';
console.log((i + 1) + '.', title + ':', hasSource ? '✓ ' + src : '❌ NO SOURCE');
});
console.log('=== End Debug ===');
}, 2000);
</script>
</section><div id="shopify-section-template--18653179052188__featured_product_zkjt9L" class="shopify-section index-section">
<section
class="page-content page-content--product page-content--partial"
data-section-id="template--18653179052188__featured_product_zkjt9L"
data-product-id="7374955085980"
>
<div class="page-width">
<div class="product-grid__container product--images float-grid grid--product-images--partial clearfix"><div class="grid__item medium-up--one-half product-single__sticky">
<product-images
data-product-images
data-zoom="false"
data-has-slideshow="false"
data-media-gallery-layout=""
data-modal="false"
data-product-id="7374955085980"
data-section-id="template--18653179052188__featured_product_zkjt9L"
>
<div class="product__photos product__photos-template--18653179052188__featured_product_zkjt9L product__photos--beside">
<div class="product__main-photos" data-product-single-media-group>
<div
data-product-photos
data-zoom="false"
class="product-slideshow"
id="ProductPhotos-template--18653179052188__featured_product_zkjt9L"
>
<div
class="product-main-slide starting-slide"
data-index="0"
data-media-id="26893580828828"
>
<div
data-product-image-main
class="product-image-main"
><div
class="image-wrap hide"
style="height: 0; padding-bottom: 41.666666666666664%;"
>
<is-land on:visible data-image-type="photoswipe">
<img src="//diagnosticdetectives.ru/cdn/shop/products/Experts_Diagnostic_Detectives_Network_MD_PhDcopy.002.jpg?v=1666367638&width=1080" alt="Уточните план лечения, проконсультировавшись с ведущими специалистами, которые полностью соответствуют вашему клиническому случаю." srcset="//diagnosticdetectives.ru/cdn/shop/products/Experts_Diagnostic_Detectives_Network_MD_PhDcopy.002.jpg?v=1666367638&width=360 360w, //diagnosticdetectives.ru/cdn/shop/products/Experts_Diagnostic_Detectives_Network_MD_PhDcopy.002.jpg?v=1666367638&width=540 540w, //diagnosticdetectives.ru/cdn/shop/products/Experts_Diagnostic_Detectives_Network_MD_PhDcopy.002.jpg?v=1666367638&width=720 720w, //diagnosticdetectives.ru/cdn/shop/products/Experts_Diagnostic_Detectives_Network_MD_PhDcopy.002.jpg?v=1666367638&width=900 900w, //diagnosticdetectives.ru/cdn/shop/products/Experts_Diagnostic_Detectives_Network_MD_PhDcopy.002.jpg?v=1666367638&width=1080 1080w" width="1080" height="450.0" loading="eager" class="
image-element" data-photoswipe-src="//diagnosticdetectives.ru/cdn/shop/products/Experts_Diagnostic_Detectives_Network_MD_PhDcopy.002.jpg?v=1666367638&width=1800" data-photoswipe-width="1920" data-photoswipe-height="800" data-index="1" sizes="
(min-width: 769px) 50vw, 75vw" data-animate="none">
</is-land>
</div><div class="product__video-wrapper">
<is-land on:idle>
<div
class="video-media aspect-ratio--16-9"
data-background="false"
><video-media
defer-hydration
>
<video playsinline="true" controls="controls" preload="metadata" aria-label="Уточните план лечения, проконсультировавшись с ведущими специалистами, которые полностью соответствуют вашему клиническому случаю." poster="//diagnosticdetectives.ru/cdn/shop/products/Experts_Diagnostic_Detectives_Network_MD_PhDcopy.002_500x.jpg?v=1666367638"><source src="//diagnosticdetectives.ru/cdn/shop/videos/c/vp/a22b0d50e4c64d9c8b0a558888197f4a/a22b0d50e4c64d9c8b0a558888197f4a.HD-720p-4.5Mbps-8813343.mp4?v=0" type="video/mp4"><img src="//diagnosticdetectives.ru/cdn/shop/products/Experts_Diagnostic_Detectives_Network_MD_PhDcopy.002_500x.jpg?v=1666367638"></video>
</video-media></div>
<template data-island>
<script type="module">
import 'components/video-media'
</script>
</template>
</is-land>
</div></div>
</div>
</div></div>
<div
data-product-thumbs
class="product__thumbs product__thumbs--beside product__thumbs-placement--left medium-up--hide small--hide"
data-position="beside"
data-arrows="false"
><div class="product__thumbs--scroller"></div></div>
</div>
<script type="application/json" data-current-variant-json>{"id":41852130001052,"title":"Default Title","option1":"Default Title","option2":null,"option3":null,"sku":"","requires_shipping":false,"taxable":false,"featured_image":null,"available":true,"name":"Уточните план лечения, проконсультировавшись с ведущими специалистами, которые полностью соответствуют вашему клиническому случаю.","public_title":null,"options":["Default Title"],"price":0,"weight":0,"compare_at_price":null,"inventory_management":null,"barcode":"","requires_selling_plan":false,"selling_plan_allocations":[]}</script>
<script type="application/json" data-product-options-json>["Title"]</script>
</product-images>
<script type="module">
import 'components/product-images'
</script>
<script type="application/json" id="ModelJson-template--18653179052188__featured_product_zkjt9L">
[]
</script><div class="localized-video-iframe-container" style="margin-top: 1.5rem;">
<div id="language-selector-wrapper">
<label for="language-selector">🎧 Select dubbed video language:</label>
<select id="language-selector">
<option value="">Choose dubbed language</option>
<option value="de" >Deutsch</option>
<option value="fr" >Français</option>
<option value="ru" selected>Русский</option>
<option value="it" >Italiano</option>
<option value="es" >Español</option>
<option value="pt" >Português</option>
<option value="ar" >العربية</option>
<option value="zh" >中文</option>
<option value="ja" >日本語</option>
<option value="ko" >한국어</option>
</select>
</div>
<iframe id="localized-video-iframe"
src="https://player.vimeo.com/video/1113043591?autoplay=0&title=0&byline=0&portrait=0"
data-selected-lang="ru"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
loading="lazy"
style="width:100%; aspect-ratio:16/9; margin-top: 0.5rem;">
</iframe>
</div></div><div class="product-grid__content product--description product-single__sticky grid__item medium-up--one-half">
<div class="product-single__meta">
<div class="product-block" data-section-id="template--18653179052188__featured_product_zkjt9L" >
<h1 class="h2 product-single__title">Уточните план лечения, проконсультировавшись с ведущими специалистами, которые полностью соответствуют вашему клиническому случаю.</h1></div>
<div class="product-block" >
<a class="custom-white-button" href="/pages/services" target="_self" rel="noopener noreferrer">
Can we help?
</a>
<style>
.custom-white-button {
background-color: transparent !important;
color: #ffffff !important;
border: 2px solid #ffffff !important;
font-size: 18px !important;
padding: 10px 20px !important;
text-align: center !important;
display: inline-block !important;
text-decoration: none !important;
}
.custom-white-button:hover {
background-color: #ff0000 !important;
color: #ffffff !important;
}
</style>
</div>
</div>
</div></div>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", function () {
const selector = document.getElementById("language-selector");
const iframe = document.getElementById("localized-video-iframe");
if (!selector || !iframe) return;
// 🧠 Detect the language used in video (via data attribute from Liquid)
const loadedLang = iframe.getAttribute("data-selected-lang");
if (loadedLang) {
selector.value = loadedLang;
}
// 🧠 On dropdown change, switch video
selector.addEventListener("change", function () {
const lang = selector.value;
if (!lang) return;
const metafieldUrl = {"vimeo_url_ar":"https:\/\/player.vimeo.com\/video\/1113042680","vimeo_url_de":"https:\/\/player.vimeo.com\/video\/1113042888","vimeo_url_es":"https:\/\/player.vimeo.com\/video\/1113043009","vimeo_url_fr":"https:\/\/player.vimeo.com\/video\/1113043115","vimeo_url_it":"https:\/\/player.vimeo.com\/video\/1113043209","vimeo_url_ja":"https:\/\/player.vimeo.com\/video\/1113043318","vimeo_url_ko":"https:\/\/player.vimeo.com\/video\/1113043403","vimeo_url_pt":"https:\/\/player.vimeo.com\/video\/1113043502","vimeo_url_ru":"https:\/\/player.vimeo.com\/video\/1113043591","vimeo_url_zh":"https:\/\/player.vimeo.com\/video\/1113042779"};
const urlKey = "vimeo_url_" + lang;
const newUrl = metafieldUrl[urlKey];
if (newUrl) {
iframe.src = newUrl + "?autoplay=0&title=0&byline=0&portrait=0";
}
});
});
</script>
</div><section id="shopify-section-template--18653179052188__emc_video_enhancements_mczj7V" class="shopify-section emc-video-enhancements">
<div class="emc-enhancements-wrapper" data-section-id="template--18653179052188__emc_video_enhancements_mczj7V"><!-- Include playlist synchronization -->
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(initializePlaylistSync, 1000);
});
function initializePlaylistSync() {
const videoCards = document.querySelectorAll('.video-card');
const dubbedIframe = document.querySelector('[id^="emc-dubbed-iframe-"]');
const langSelector = document.querySelector('[id^="emc-dubbed-select-"]');
const heroVideo = findHeroVideo();
console.log('EMC Sync - Video cards:', videoCards.length, 'Dubbed iframe:', !!dubbedIframe, 'Hero video:', !!heroVideo);
if (videoCards.length && dubbedIframe) {
setupVideoSync(videoCards, dubbedIframe, langSelector, heroVideo);
}
}
function findHeroVideo() {
return document.getElementById('hero-video') ||
document.querySelector('.hero video') ||
document.querySelector('.hero iframe') ||
document.querySelector('[data-hero-video]');
}
function setupVideoSync(videoCards, dubbedIframe, langSelector, heroVideo) {
videoCards.forEach(function(card, index) {
card.addEventListener('click', function() {
const videoSrc = card.getAttribute('data-video-src');
const videoTitle = card.getAttribute('data-video-title');
console.log('Playlist clicked:', videoTitle);
// Update hero video (English)
if (heroVideo && videoSrc) {
updateHeroVideo(heroVideo, videoSrc);
}
// Update dubbed video with new product
updateDubbedVideoFromPlaylist(card, langSelector);
// Update visual state
videoCards.forEach(c => c.classList.remove('active', 'playing'));
card.classList.add('active', 'playing');
});
});
// Language changes
if (langSelector) {
langSelector.addEventListener('change', function() {
console.log('Language changed to:', this.value);
// Pause hero video when user changes language
if (heroVideo && heroVideo.tagName === 'VIDEO') {
heroVideo.pause();
}
});
}
// If user explicitly plays the English hero, pause dubbed video
if (heroVideo) {
heroVideo.addEventListener('play', function() {
try {
pauseDubbedVideo(dubbedIframe);
console.log('Hero playing → paused dubbed video');
} catch (e) { /* ignore */ }
});
}
}
function updateHeroVideo(heroVideo, videoSrc) {
try {
if (heroVideo.tagName === 'VIDEO') {
heroVideo.src = videoSrc;
heroVideo.load();
// Don't autoplay - let dubbed video play instead
} else if (heroVideo.tagName === 'IFRAME') {
let newSrc = videoSrc;
// Format for iframe if needed
if (videoSrc.includes('vimeo.com/') && !videoSrc.includes('player.vimeo.com')) {
const vimeoId = videoSrc.match(/vimeo\.com\/(\d+)/);
if (vimeoId) {
newSrc = `https://player.vimeo.com/video/${vimeoId[1]}?autoplay=0&muted=0`;
}
}
heroVideo.src = newSrc;
}
console.log('Updated hero video source');
} catch (error) {
console.error('Error updating hero video:', error);
}
}
async function updateDubbedVideoFromPlaylist(playlistCard, langSelector) {
console.log('Updating dubbed video from playlist...');
// Try to extract product information from the playlist card
let productHandle = null;
let productId = null;
let availableLangsRaw = null;
// Method 1: Look for product ID or handle in data attributes
productId = playlistCard.getAttribute('data-product-id');
productHandle = playlistCard.getAttribute('data-product-handle');
availableLangsRaw = playlistCard.getAttribute('data-available-langs');
// Log what we found
console.log('Product data from playlist card:', {
id: productId,
handle: productHandle,
title: playlistCard.getAttribute('data-video-title'),
hasEmbeddedLangs: !!availableLangsRaw
});
// Preferred path: use embedded language URLs rendered server-side
if (availableLangsRaw) {
try {
const map = parseAvailableLangs(availableLangsRaw);
applyDubbedLanguageMap(map, langSelector);
return;
} catch (e) {
console.warn('Failed to parse embedded language URLs, falling back to fetch', e);
}
}
if (productId || productHandle) {
try {
// Fetch product data to get multilingual video URLs
const productData = await fetchProductData(productId, productHandle);
if (productData) {
console.log('Product fetched, checking for metafields...');
console.log('Available product keys:', Object.keys(productData));
// Check different possible metafield structures
let metafields = null;
if (productData.metafields) {
metafields = productData.metafields;
} else if (productData.meta) {
metafields = productData.meta;
}
if (metafields) {
console.log('Found metafields:', Object.keys(metafields));
updateDubbedVideoUrls(metafields, langSelector);
} else {
console.log('No metafields found in product data');
}
}
} catch (error) {
console.error('Failed to fetch product data for dubbed video:', error);
}
} else {
console.log('No product identifier found for dubbed video update');
}
}
function parseAvailableLangs(raw) {
// raw format: "de::https://...||fr::https://..."
const map = {};
const safe = (raw || '').replace(/&/g, '&');
safe.split('||').forEach(pair => {
const parts = pair.split('::');
if (parts.length >= 2) {
map[parts[0]] = parts[1];
}
});
return map;
}
function applyDubbedLanguageMap(languageUrls, langSelector) {
console.log('Applying embedded language URLs to EMCDubbed');
if (!languageUrls || Object.keys(languageUrls).length === 0) return;
const dubbedCards = document.querySelectorAll('.emc-dubbed-card');
dubbedCards.forEach(card => {
const uid = card.id.replace('emc-dubbed-card-', '');
if (window.EMCDubbed && window.EMCDubbed[uid]) {
window.EMCDubbed[uid].overwriteAvailable(languageUrls);
console.log('Updated dubbed video via EMCDubbed API (embedded data)');
}
});
}
async function fetchProductData(productId, productHandle) {
// Shopify product JSON endpoint uses handles, not IDs
let productData = null;
if (productHandle) {
try {
console.log('Fetching product by handle:', productHandle);
const response = await fetch(`/products/${productHandle}.js`);
if (response.ok) {
productData = await response.json();
console.log('Successfully fetched product data:', productData.title);
} else {
console.log('Failed to fetch product by handle, status:', response.status);
}
} catch (error) {
console.log('Failed to fetch by product handle:', error);
}
} else {
console.log('No product handle available for fetching');
}
return productData;
}
function updateDubbedVideoUrls(metafields, langSelector) {
console.log('Updating dubbed video with new language URLs');
// Extract language URLs from metafields
const languageUrls = {};
const languages = ['de', 'fr', 'ru', 'it', 'es', 'pt', 'ar', 'zh', 'ja', 'ko'];
languages.forEach(lang => {
const key = `vimeo_url_${lang}`;
if (metafields[key]) {
languageUrls[lang] = metafields[key];
}
});
console.log('Found language URLs:', Object.keys(languageUrls));
if (Object.keys(languageUrls).length > 0) {
// Find the EMCDubbed instance and update it
const dubbedCards = document.querySelectorAll('.emc-dubbed-card');
dubbedCards.forEach(card => {
const uid = card.id.replace('emc-dubbed-card-', '');
if (window.EMCDubbed && window.EMCDubbed[uid]) {
window.EMCDubbed[uid].overwriteAvailable(languageUrls);
console.log('Updated dubbed video via EMCDubbed API');
}
});
} else {
console.log('No language URLs found for this product');
}
}
function pauseDubbedVideo(dubbedIframe) {
if (!dubbedIframe) return;
try {
// Attempt Vimeo postMessage API
dubbedIframe.contentWindow.postMessage('{"method":"pause"}', '*');
} catch (e) {
// No-op for cross-origin errors
}
}
</script>
<!-- Include Vimeo thumbnail fix -->
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(initVimeoThumbnailFix, 800);
});
function initVimeoThumbnailFix() {
// Temporarily disable thumbnail fixes to avoid breaking existing functionality
// The native Vimeo player handles thumbnails adequately for dubbed videos
console.log('Vimeo thumbnail fix disabled - using native player thumbnails');
return;
}
function enhanceVimeoIframeWithThumbnail(iframe, index) {
const vimeoId = extractVimeoId(iframe.src);
if (!vimeoId) return;
const container = createThumbnailContainer(iframe, index);
const thumbnailImg = container.querySelector('.emc-vimeo-thumbnail-img');
const playButton = container.querySelector('.emc-vimeo-play-button');
fetchVimeoThumbnail(vimeoId)
.then(function(thumbnailUrl) {
if (thumbnailUrl) {
thumbnailImg.src = thumbnailUrl;
thumbnailImg.style.display = 'block';
container.classList.add('thumbnail-loaded');
} else {
showFallbackThumbnail(container);
}
})
.catch(function(error) {
showFallbackThumbnail(container);
});
playButton.addEventListener('click', function() {
playVimeoVideo(iframe, container);
});
}
function extractVimeoId(src) {
const patterns = [
/player\.vimeo\.com\/video\/(\d+)/,
/vimeo\.com\/(\d+)/,
/vimeo\.com\/video\/(\d+)/
];
for (const pattern of patterns) {
const match = src.match(pattern);
if (match) return match[1];
}
return null;
}
function createThumbnailContainer(iframe, index) {
// For dubbed videos, we don't need thumbnail overlays
// The native Vimeo player already handles thumbnails and controls
// Just ensure the iframe has proper styling
iframe.style.borderRadius = '12px';
return null; // Don't create overlay for dubbed videos
}
async function fetchVimeoThumbnail(vimeoId) {
try {
const oembedUrl = `https://vimeo.com/api/oembed.json?url=https://vimeo.com/${vimeoId}&width=640`;
const response = await fetch(oembedUrl);
if (response.ok) {
const data = await response.json();
return data.thumbnail_url;
}
} catch (error) {
console.log('Using fallback thumbnail method');
}
return `https://i.vimeocdn.com/video/${vimeoId}_640x360.jpg`;
}
function showFallbackThumbnail(container) {
const loading = container.querySelector('.emc-vimeo-loading');
loading.textContent = 'Click to play video';
container.classList.add('fallback-mode');
const overlay = container.querySelector('.emc-vimeo-thumbnail-overlay');
overlay.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
overlay.style.color = 'white';
}
function playVimeoVideo(iframe, container) {
const overlay = container.querySelector('.emc-vimeo-thumbnail-overlay');
overlay.style.opacity = '0';
overlay.style.pointerEvents = 'none';
const currentSrc = iframe.src;
let newSrc = currentSrc;
if (currentSrc.includes('autoplay=0')) {
newSrc = currentSrc.replace('autoplay=0', 'autoplay=1');
} else if (!currentSrc.includes('autoplay=')) {
const separator = currentSrc.includes('?') ? '&' : '?';
newSrc = currentSrc + separator + 'autoplay=1';
}
iframe.src = newSrc;
container.classList.add('playing');
}
</script>
<style>
.emc-vimeo-thumbnail-container {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #000;
}
.emc-vimeo-thumbnail-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s ease;
z-index: 10;
}
.emc-vimeo-thumbnail-img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
}
.emc-vimeo-play-button {
position: relative;
z-index: 3;
width: 80px; height: 80px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
}
.emc-vimeo-play-button:hover {
background: white;
transform: scale(1.1);
}
.play-icon {
font-size: 28px;
color: #333;
margin-left: 4px;
}
.emc-vimeo-loading {
position: absolute;
bottom: 16px; left: 16px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.9em;
z-index: 2;
}
.emc-vimeo-thumbnail-container.thumbnail-loaded .emc-vimeo-loading {
display: none;
}
.emc-vimeo-thumbnail-container.playing .emc-vimeo-thumbnail-overlay {
opacity: 0;
pointer-events: none;
}
@media (max-width: 768px) {
.emc-vimeo-play-button {
width: 60px; height: 60px;
}
.play-icon { font-size: 20px; }
}
</style>
</div><style>
.emc-enhancements-wrapper {
/* This section is invisible by default - it just adds functionality */
display: block;
}
.emc-debug-info {
font-family: monospace;
border: 1px solid #ddd;
background: #f9f9f9;
}
.emc-custom-liquid {
margin: 1rem 0;
}
/* Tighten vertical spacing around dubbed + hero + playlist on metaobject pages */
.emc-dubbed-card { margin-bottom: 8px; }
.emc-dubbed-card__player { margin-top: 4px; }
.video-parent-section.hero { margin-top: 8px; }
.section-template { padding-top: 12px !important; }
/* Ensure consistent widths between dubbed iframe and English hero */
.emc-dubbed-card__player iframe,
.hero .hero-video,
.hero #hero-video,
.hero .hero-video-wrapper { width: 100% !important; }
.hero .hero__media, .hero .hero__media-container { max-width: 100% !important; }
/* Masterclass: ensure Vimeo/hero fills container width */
.video-parent-section.hero { width: 100% !important; max-width: 100% !important; margin-left: auto; margin-right: auto; }
.video-parent-section.hero .hero__media,
.video-parent-section.hero .hero__media-container,
.video-parent-section.hero .hero-video-wrapper { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; }
.video-parent-section.hero .hero__media iframe,
.video-parent-section.hero iframe#hero-video { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; max-width: 100% !important; position: absolute !important; }
/* Extra guardrails for hero container width on metaobject pages */
.video-parent-section.hero { width: 100% !important; max-width: 100% !important; margin-left: auto; margin-right: auto; }
.video-parent-section.hero .hero__media,
.video-parent-section.hero .hero__media-container,
.video-parent-section.hero .hero-video-wrapper { width: 100% !important; max-width: 100% !important; }
.video-parent-section.hero iframe#hero-video { width: 100% !important; max-width: 100% !important; }
/* When hero is a <video>, guarantee poster scales full width before play */
video#hero-video.hero-video { display: block; height: auto; }
</style>
</section>
</main><!-- BEGIN sections: footer-group -->
<div id="shopify-section-sections--18523926593692__footer" class="shopify-section shopify-section-group-footer-group">
<div class="footer__section footer__section--border">
<div class="page-width">
<div class="footer__newsletter"><div class="footer__subscribe rte rte--nomargin clearfix">
<p><strong>Get high-impact health ideas [1x month]</strong></p>
</div>
<form method="post" action="/contact#newsletter-sections--18523926593692__footer" id="newsletter-sections--18523926593692__footer" accept-charset="UTF-8" class="contact-form"><input type="hidden" name="form_type" value="customer" /><input type="hidden" name="utf8" value="✓" />
<label for="Email-sections--18523926593692__footer" class="visually-hidden">
Enter your email
</label>
<label for="newsletter-form-submit-sections--18523926593692__footer" class="visually-hidden">
Subscribe
</label>
<input type="hidden" name="contact[tags]" value="prospect,newsletter">
<input type="hidden" name="contact[context]" value="footer">
<div class="input-group newsletter__input-group">
<input
type="email"
value=""
placeholder="
Enter your email
"
name="contact[email]"
id="Email-sections--18523926593692__footer"
class="input-group-field newsletter__input"
autocorrect="off"
autocapitalize="off"
required
>
<div class="input-group-btn">
<button
type="submit"
id="newsletter-form-submit-sections--18523926593692__footer"
class="btn"
name="commit"
aria-label="
Subscribe
"
>
<span class="form__submit--large">
Subscribe
</span>
<span class="form__submit--small">
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon--wide icon-arrow-right"
viewbox="0 0 50 15"
fill="currentColor"
width="20"
height="20"
>
<path d="M0 9.63V5.38h35V0l15 7.5L35 15V9.63Z" />
</svg>
</span>
</button>
</div>
</div></form>
</div>
</div>
</div>
<div id="FooterMobileNavWrap" class="footer__section footer__section--border medium-up--hide">
<div id="FooterMobileNav" class="page-width"></div>
</div><is-land on:visible>
<footer-section class="site-footer" data-section-id="sections--18523926593692__footer" data-section-type="footer-section">
<div
id="FooterMenus"
class="footer__section footer__section--menus "
>
<div class="page-width">
<div class="footer__blocks"><div
class="footer__block footer__block--menu"
data-type="menu"
>
<h2 class="footer__title h4">
About us
</h2>
<ul class="footer__menu"><li>
<a href="/pages/our-mission-story">About us. Mission. Story.</a>
</li><li>
<a href="/pages/expert-advisory-board">Expert Advisory Board</a>
</li><li>
<a href="/pages/expert-testimonials">Expert Testimonials</a>
</li></ul>
</div><div
class="footer__block footer__block--payment"
data-type="payment"
>
<div class="footer__mobile-section">
<div class="footer__blocks--mobile"></div>
</div>
</div></div>
</div>
</div>
<div class="footer__section">
<div class="page-width text-center small--text-left">
<div class="footer__base-links"><span>
© 2025
DiagnosticDetectives.Com
</span><a target="_blank" rel="nofollow" href="https://www.shopify.com?utm_campaign=poweredby&utm_medium=shopify&utm_source=onlinestore">На платформе Shopify</a>
</div>
</div>
</div>
</footer-section>
<template data-island>
<script type="module">
import 'components/section-footer'
</script>
</template>
</is-land>
</div>
<!-- END sections: footer-group --></div>
</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<button
class="btn btn--secondary btn--circle pswp__button pswp__button--arrow--left"
title="
Previous
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-chevron-left"
viewbox="0 0 284.49 498.98"
fill="currentColor"
width="20"
height="20"
>
<path
d="M249.49 0a35 35 0 0 1 24.75 59.75L84.49 249.49l189.75 189.74a35.002 35.002 0 1 1-49.5 49.5L10.25 274.24a35 35 0 0 1 0-49.5L224.74 10.25A34.89 34.89 0 0 1 249.49 0"
/>
</svg>
</button>
<button
class="btn btn--secondary btn--circle btn--large pswp__button pswp__button--close"
title="
Close (esc)
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-close icon--line"
viewbox="0 0 64 64"
width="20"
height="20"
>
<path
d="m19 17.61 27.12 27.13m0-27.13L19 44.74"
stroke-miterlimit="10"
fill="none"
stroke="currentColor"
/>
</svg>
</button>
<button
class="btn btn--secondary btn--circle pswp__button pswp__button--arrow--right"
title="
Next
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-chevron-right"
viewbox="0 0 284.49 498.98"
fill="currentColor"
width="20"
height="20"
>
<path
d="M35 498.98a35 35 0 0 1-24.75-59.75l189.74-189.74L10.25 59.75a35.002 35.002 0 0 1 49.5-49.5l214.49 214.49a35 35 0 0 1 0 49.5L59.75 488.73A34.89 34.89 0 0 1 35 498.98"
/>
</svg>
</button>
</div>
</div>
</div>
<tool-tip data-tool-tip="">
<div class="tool-tip__inner" data-tool-tip-inner>
<button class="tool-tip__close btn btn--circle btn--icon" data-tool-tip-close="">
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
role="presentation"
class="icon icon-close icon--line"
viewbox="0 0 64 64"
width="20"
height="20"
>
<path
d="m19 17.61 27.12 27.13m0-27.13L19 44.74"
stroke-miterlimit="10"
fill="none"
stroke="currentColor"
/>
</svg>
</button>
<div data-tool-tip-title>Dr. Martin Schilling</div>
<div class="tool-tip__content" data-tool-tip-content></div>
</div>
</tool-tip>
<script type="module">
import 'components/tool-tip'
</script>
</body>
</html>
