DOMContentLoaded", () => { const hiddenElements = document.querySelectorAll('.ecom-animation .hidden-element'); const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 // Trigger when 10% of the element is visible }; const observerCallback = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); observer.unobserve(entry.target); } }); }; const observer = new IntersectionObserver(observerCallback, observerOptions); hiddenElements.forEach(element => observer.observe(element)); }); //Spec code// function hideRowsWithDashMetafield() { // Only look for metafields within the skuspecs section const skuspecsSection = document.getElementById('skuspecs'); if (!skuspecsSection) { console.log('Skuspecs section not found'); return; } const metafieldContainers = skuspecsSection.querySelectorAll('.ecom-product-single__metafield-container'); metafieldContainers.forEach(container => { const content = container.textContent.trim(); // Skip if this metafield contains "meta.wtb" if (content.includes('meta.wtb')) { return; } // Check for dash or common empty states - be more specific if (content === '-' || content === '' || content === 'N/A' || content === 'n/a') { // Additional check: make sure this isn't a video/media container const hasVideo = container.querySelector('video, iframe, embed, object') || container.closest('.ecom-row').querySelector('video, iframe, embed, object'); // Only proceed if no video/media elements are found if (!hasVideo) { // Find the row that contains both the label and metafield const parentRow = container.closest('.ecom-row'); if (parentRow) { // Then find the outer container that wraps this entire row structure const outerContainer = parentRow.closest('.ecom-block.ecom-core.core__block.elmspace'); if (outerContainer && !outerContainer.hasAttribute('data-hidden')) { // Mark as processed to avoid redundant operations outerContainer.setAttribute('data-hidden', 'true'); // Use a single CSS class for cleaner styling outerContainer.classList.add('metafield-hidden'); // Fallback inline styles if CSS class isn't available Object.assign(outerContainer.style, { display: 'none', margin: '0', padding: '0', height: '0', minHeight: '0', overflow: 'hidden' }); } } } } }); } // Optimized DOM ready check function runWhenReady(fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn, { once: true }); } else { fn(); } } // Debounced mutation observer for better performance let mutationTimeout; const debouncedHideRows = () => { clearTimeout(mutationTimeout); mutationTimeout = setTimeout(hideRowsWithDashMetafield, 100); }; // More efficient mutation observer - only watch the skuspecs section const observer = new MutationObserver(mutations => { let shouldCheck = false; for (const mutation of mutations) { if (mutation.type === 'childList') { for (const node of mutation.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE) { // Only care about changes within or to the skuspecs section const skuspecsSection = document.getElementById('skuspecs'); if (skuspecsSection && ( skuspecsSection.contains(node) || node.contains && node.contains(skuspecsSection) || node.matches?.('.ecom-product-single__metafield-container') || node.querySelector?.('.ecom-product-single__metafield-container') )) { shouldCheck = true; break; } } } } if (shouldCheck) break; } if (shouldCheck) { debouncedHideRows(); } }); // Initialize - only run on frontend, not in backend previews runWhenReady(() => { // Check if we're in a backend/preview environment const isBackend = // Check for common backend/preview indicators window.location.href.includes('/admin') || window.location.href.includes('/preview') || window.location.href.includes('?preview=') || window.location.href.includes('&preview=') || document.body.classList.contains('admin') || document.body.classList.contains('preview') || document.body.classList.contains('editor') || document.querySelector('.admin-bar') || document.querySelector('[data-preview]') || // Check if we're in an iframe (common for previews) window.self !== window.top || // Check for edit mode indicators document.body.dataset.editMode || document.body.classList.contains('edit-mode'); // Only run on frontend if (!isBackend) { console.log('Running metafield hider on frontend'); hideRowsWithDashMetafield(); // Start observing for dynamic content observer.observe(document.body, { childList: true, subtree: true }); } else { console.log('Skipping metafield hider - detected backend/preview environment'); } }); // Optional: Add CSS class for better performance const style = document.createElement('style'); style.textContent = ` .metafield-hidden { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } `; document.head.appendChild(style); // Simple Anti-Pause - Only restart when other videos are played (function() { 'use strict'; function restartBackgroundVideos() { const backgroundVideos = document.querySelectorAll(` .ecom-section__video-bg iframe[src*="vimeo.com"], .mobile-video-replacement iframe[src*="vimeo.com"], .ecom-video-background-youtube iframe[src*="vimeo.com"] `); backgroundVideos.forEach(iframe => { try { iframe.contentWindow.postMessage('{"method":"play"}', '*'); iframe.contentWindow.postMessage('{"method":"setVolume","value":0}', '*'); } catch (e) { // Silent fail } }); if (backgroundVideos.length > 0) { console.log(`Restarted ${backgroundVideos.length} background videos`); } } // Listen for clicks on videos that aren't background videos document.addEventListener('click', (e) => { const clickedElement = e.target; // Check if it's a video-related element const isVideo = clickedElement.tagName === 'IFRAME' && clickedElement.src.includes('vimeo.com') || clickedElement.tagName === 'VIDEO' || clickedElement.closest('iframe[src*="vimeo.com"]') || clickedElement.closest('video'); // Check if it's NOT a background video const isBackgroundVideo = clickedElement.closest('.ecom-section__video-bg') || clickedElement.closest('.mobile-video-replacement') || clickedElement.closest('.ecom-video-background-youtube'); // If it's a video but not a background video, restart background videos if (isVideo && !isBackgroundVideo) { console.log('Non-background video clicked - restarting background videos'); // Wait a moment for the clicked video to start, then restart background videos setTimeout(restartBackgroundVideos, 1500); } }); // Also listen for native play events on video elements document.addEventListener('play', (e) => { const playedVideo = e.target; // Check if it's not a background video const isBackgroundVideo = playedVideo.closest('.ecom-section__video-bg') || playedVideo.closest('.mobile-video-replacement') || playedVideo.closest('.ecom-video-background-youtube'); if (!isBackgroundVideo) { console.log('Non-background video started playing - restarting background videos'); setTimeout(restartBackgroundVideos, 1000); } }, true); console.log('Background video anti-pause system active'); })(); // Simple Mobile Video Fix - Copy your working method exactly (function() { 'use strict'; // Only run on mobile function isMobile() { return window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); } if (!isMobile()) return; function replaceWithWorkingMethod() { console.log('Replacing EComposer videos with proven working method...'); // Handle section-level videos const videoSections = document.querySelectorAll('.ecom-section__video-bg'); videoSections.forEach((videoSection, index) => { // Skip if already processed if (videoSection.querySelector('.simple-mobile-video')) { return; } // Find the Vimeo iframe to get video ID const vimeoIframe = videoSection.querySelector('iframe[src*="vimeo.com"]'); if (vimeoIframe) { const videoId = vimeoIframe.src.match(/video\/(\d+)/)?.[1]; if (videoId) { console.log(`Replacing section ${index} with video ID: ${videoId}`); // Create the exact same structure as your working example const workingVideoHTML = `

`; // Insert at the beginning of the section videoSection.insertAdjacentHTML('afterbegin', workingVideoHTML); // Hide original EComposer video elements const originalVideo = videoSection.querySelector('.ecom-video-background-youtube-wrapper'); if (originalVideo) { originalVideo.style.display = 'none'; } // Remove background image videoSection.style.backgroundImage = 'none'; videoSection.style.background = 'transparent'; videoSection.style.position = 'relative'; videoSection.style.overflow = 'hidden'; // Ensure content stays above video const allContent = videoSection.querySelectorAll('*:not(.simple-mobile-video):not(.simple-mobile-video *)'); allContent.forEach(element => { const currentZIndex = window.getComputedStyle(element).zIndex; if (currentZIndex === 'auto' || parseInt(currentZIndex) < 10) { element.style.position = 'relative'; element.style.zIndex = '10'; } }); // Add the same JavaScript logic as your working example setTimeout(() => { const iframe = document.getElementById(`mobile-hero-video-${index}`); const expectedSrc = `https://player.vimeo.com/video/${videoId}?autoplay=1&muted=1&controls=0&background=1&loop=1&playsinline=1&autopause=0`; if (iframe && iframe.src !== expectedSrc) { iframe.src = expectedSrc; } // Enhanced video management (from your working example) function maintainVideoPlayback() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { try { iframe.contentWindow.postMessage('{"method":"play"}', '*'); } catch (e) { iframe.src = iframe.src; } } }); }, { threshold: 0.1 }); observer.observe(iframe); setInterval(() => { const rect = iframe.getBoundingClientRect(); const isVisible = rect.top < window.innerHeight && rect.bottom > 0; if (isVisible) { try { iframe.contentWindow.postMessage('{"method":"play"}', '*'); } catch (e) { // Silent fail } } }, 5000); } setTimeout(maintainVideoPlayback, 2000); // Handle page visibility changes document.addEventListener('visibilitychange', function() { if (!document.hidden) { setTimeout(() => { try { iframe.contentWindow.postMessage('{"method":"play"}', '*'); } catch (e) { iframe.src = iframe.src; } }, 500); } }); }, 1000); console.log(`Section ${index} replaced with working video method`); } } }); // Handle column-level videos with the same method const videoColumns = document.querySelectorAll('.ecom-column'); videoColumns.forEach((column, index) => { if (column.querySelector('.simple-mobile-video')) return; const vimeoIframe = column.querySelector('iframe[src*="vimeo.com"]'); if (vimeoIframe) { const videoId = vimeoIframe.src.match(/video\/(\d+)/)?.[1]; if (videoId) { const overlay = column.querySelector('.ecom-column__overlay'); if (overlay) { const workingVideoHTML = `

`; overlay.insertAdjacentHTML('afterbegin', workingVideoHTML); // Hide original elements const originalElements = overlay.querySelectorAll('.ecom-video-background-youtube-wrapper, video.ecom-video-background'); originalElements.forEach(el => el.style.display = 'none'); overlay.style.position = 'relative'; // Ensure content stays above const contentBlocks = overlay.querySelectorAll('.core__blocks, .ecom__element, .ecom-element, .ecom__heading, .text-content'); contentBlocks.forEach(block => { block.style.position = 'relative'; block.style.zIndex = '10'; block.style.pointerEvents = 'auto'; }); } } } }); } // Run the replacement replaceWithWorkingMethod(); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', replaceWithWorkingMethod); } window.addEventListener('load', () => { setTimeout(replaceWithWorkingMethod, 1000); }); console.log('Simple working mobile video replacement initialized'); })(); // Hide play button and force video to play on mobile (function() { 'use strict'; // Only run on mobile function isMobile() { return window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); } if (!isMobile()) return; // CSS to hide play buttons and video controls const hideControlsCSS = ` @media (max-width: 768px) { /* Hide all video controls and play buttons */ video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-play-button, video::-webkit-media-controls-start-playback-button { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Hide video controls for other browsers */ video::-moz-media-controls, video::-ms-media-controls { display: none !important; } /* Ensure video elements have no controls */ video[controls] { -webkit-appearance: none !important; appearance: none !important; } /* Hide any custom play button overlays EComposer might add */ .ecom-video-background + *[class*="play"], .ecom-video-background + *[class*="button"], *[class*="play-button"], *[class*="video-play"] { display: none !important; } } `; // Inject the CSS const style = document.createElement('style'); style.textContent = hideControlsCSS; document.head.appendChild(style); function forceVideoPlayback() { // Find all video elements in EComposer sections const videos = document.querySelectorAll(` .ecom-section__video-bg video, .mobile-video-replacement video, .ecom-column__overlay video, video.ecom-video-background `); videos.forEach((video, index) => { console.log(`Processing video ${index}:`, video.src); // Ensure proper video attributes video.setAttribute('autoplay', ''); video.setAttribute('muted', ''); video.setAttribute('playsinline', ''); video.setAttribute('loop', ''); video.removeAttribute('controls'); // Remove controls completely // Set properties directly video.autoplay = true; video.muted = true; video.playsInline = true; video.loop = true; video.controls = false; // Hide any existing play button overlay const playButtons = video.parentElement.querySelectorAll('*[class*="play"], *[class*="button"]'); playButtons.forEach(btn => btn.style.display = 'none'); // Try to play immediately const playPromise = video.play(); if (playPromise !== undefined) { playPromise.then(() => { console.log(`Video ${index} started playing automatically`); }).catch(error => { console.log(`Video ${index} autoplay failed, setting up user interaction:`, error); setupUserInteractionPlay(video, index); }); } else { setupUserInteractionPlay(video, index); } }); } function setupUserInteractionPlay(video, index) { function playOnInteraction(event) { console.log(`Playing video ${index} on user interaction`); video.muted = true; // Ensure muted const playPromise = video.play(); if (playPromise !== undefined) { playPromise.then(() => { console.log(`Video ${index} started playing after interaction`); // Remove all event listeners after successful play document.removeEventListener('touchstart', playOnInteraction); document.removeEventListener('click', playOnInteraction); document.removeEventListener('scroll', playOnInteraction); video.removeEventListener('loadeddata', playOnInteraction); }).catch(error => { console.log(`Video ${index} still failed to play:`, error); }); } } // Listen for various user interactions document.addEventListener('touchstart', playOnInteraction, { once: true, passive: true }); document.addEventListener('click', playOnInteraction, { once: true }); document.addEventListener('scroll', playOnInteraction, { once: true, passive: true }); // Also try when video finishes loading video.addEventListener('loadeddata', playOnInteraction, { once: true }); console.log(`Set up interaction listeners for video ${index}`); } // Run immediately forceVideoPlayback(); // Run after DOM loads if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', forceVideoPlayback); } // Run after everything loads window.addEventListener('load', () => { setTimeout(forceVideoPlayback, 1000); }); // Monitor for new videos being added const observer = new MutationObserver((mutations) => { let foundNewVideo = false; mutations.forEach(mutation => { mutation.addedNodes.forEach(node => { if (node.nodeType === 1 && (node.tagName === 'VIDEO' || node.querySelector?.('video'))) { foundNewVideo = true; } }); }); if (foundNewVideo) { setTimeout(forceVideoPlayback, 500); } }); observer.observe(document.body, { childList: true, subtree: true }); console.log('Mobile video play button fix initialized'); })();

Product Catalog & Lookbook

ZLINE Product Catalog

Entertainment Lookbook

INFORMATION

INFORMATION

SUPPORT

SUPPORT

PRODUCTS

PRODUCTS

STAY IN TOUCH

STAY IN TOUCH

Product Catalog
& Lookbook