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

ZLINE Designer Collection

INFORMATION

INFORMATION

PRODUCTS

PRODUCTS

SUPPORT

SUPPORT

STAY IN TOUCH

STAY IN TOUCH