(() => { const sourceBlock = section; const root = sourceBlock.closest('.shopify-section.section-wrapper') || sourceBlock.closest('.shopify-section') || sourceBlock; if (!root) return; const BUTTON_CLASS = 'section-video-sound-toggle'; const WRAPPER_CLASS = 'section-video-sound-toggle-wrapper'; const soundOnIcon = ` `; const soundOffIcon = ` `; const updateButton = (button, video) => { const isMuted = video.muted || video.volume === 0; button.innerHTML = isMuted ? soundOffIcon : soundOnIcon; button.setAttribute('aria-label', isMuted ? 'Ton aktivieren' : 'Ton deaktivieren'); button.setAttribute('title', isMuted ? 'Ton aktivieren' : 'Ton deaktivieren'); }; const ensureStyles = () => { if (root.querySelector('style[data-section-video-sound-toggle-styles="true"]')) return; const style = document.createElement('style'); style.dataset.sectionVideoSoundToggleStyles = 'true'; style.textContent = ` .${WRAPPER_CLASS} { position: relative; } .${BUTTON_CLASS} { position: absolute; right: 16px; bottom: 16px; z-index: 20; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; } .${BUTTON_CLASS}:hover { background: rgba(0, 0, 0, 0.75); } .${BUTTON_CLASS} svg { display: block; width: 22px; height: 22px; pointer-events: none; } `; root.appendChild(style); }; const getVideoWrapper = (video) => { const parent = video.parentElement; if (!parent) return null; if (window.getComputedStyle(parent).position === 'static') { parent.style.position = 'relative'; } parent.classList.add(WRAPPER_CLASS); return parent; }; const prepareVideo = (video) => { if (video.dataset.sectionSoundToggleInitialized === 'true') return; const wrapper = getVideoWrapper(video); if (!wrapper) return; video.dataset.sectionSoundToggleInitialized = 'true'; video.muted = true; video.defaultMuted = true; video.setAttribute('muted', '); const button = document.createElement('button'); button.type = 'button'; button.className = BUTTON_CLASS; updateButton(button, video); button.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); if (video.muted || video.volume === 0) { video.muted = false; video.defaultMuted = false; video.removeAttribute('muted'); video.volume = 1; } else { video.muted = true; video.defaultMuted = true; video.setAttribute('muted', '); } if (!video.paused) { const playPromise = video.play(); if (playPromise && typeof playPromise.catch === 'function') { playPromise.catch(() => {}); } } updateButton(button, video); }); video.addEventListener('volumechange', () => { updateButton(button, video); }); wrapper.appendChild(button); }; const init = () => { ensureStyles(); root.querySelectorAll('video').forEach((video) => { prepareVideo(video); }); }; init(); document.addEventListener('shopify:section:load', init); })();

Sprache

Sprache

Dein Warenkorb ist leer

Blooming into the surrealistic world!