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'); })();

All Products

Helix Handle Appliances

Holiday Promotions

Ice Makers

Induction Cooktops

Induction Ranges

Island Mount Outdoor Grill Hoods

Island Range Hoods

Kitchen Appliance Packages

Kitchen Appliances

Kitchen Faucets

Kitchen Plumbing Accessories

Kitchen Sinks

INFORMATION

INFORMATION

PRODUCTS

PRODUCTS

SUPPORT

SUPPORT

STAY IN TOUCH

STAY IN TOUCH