Mon compte - Niryo

document.addEventListener('DOMContentLoaded', function () { const VIDEO_SELECTOR = 'video'; function prepareVideo(video) { if (!video) return; video.muted = true; video.defaultMuted = true; video.playsInline = true; video.setAttribute('muted', ''); video.setAttribute('playsinline', ''); video.setAttribute('webkit-playsinline', ''); video.removeAttribute('controls'); } function safePlay(video) { if (!video) return; prepareVideo(video); function tryPlay() { const playPromise = video.play(); if (playPromise !== undefined) { playPromise.catch(function () { try { video.load(); } catch (e) {} video.addEventListener('canplay', function restart() { prepareVideo(video); video.play().catch(function () {}); }, { once: true }); }); } } if (video.readyState >= 2) { tryPlay(); } else { video.addEventListener('canplay', function () { tryPlay(); }, { once: true }); try { video.load(); } catch (e) {} } } function isVisible(element) { if (!element) return false; const style = window.getComputedStyle(element); const rect = element.getBoundingClientRect(); return ( style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity || 1) > 0 && rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.top < window.innerHeight ); } /* * ============================================ * DESKTOP — ELEMENTOR TABS * ============================================ */ function refreshDesktopTabVideos() { if (window.innerWidth < 768) { return; } document.querySelectorAll(VIDEO_SELECTOR).forEach(function (video) { /* * Important : * on ne pause PAS les vidéos cachées ici. * Safari peut avoir du mal à les reprendre ensuite. */ if (isVisible(video)) { safePlay(video); } }); /* * Force Elementor à recalculer les dimensions * des vidéos de background. */ window.dispatchEvent(new Event('resize')); } document.addEventListener('click', function (event) { const tab = event.target.closest( '.e-n-tab-title, .elementor-tab-title' ); if (!tab) return; /* * Plusieurs tentatives car Safari peut considérer * temporairement la vidéo comme cachée pendant * l'animation du tab. */ setTimeout(refreshDesktopTabVideos, 150); setTimeout(refreshDesktopTabVideos, 400); setTimeout(refreshDesktopTabVideos, 800); setTimeout(refreshDesktopTabVideos, 1400); }); /* * ============================================ * MOBILE — ELEMENTOR LOOP * ============================================ */ const mobileObserver = new IntersectionObserver(function (entries) { if (window.innerWidth >= 768) { return; } entries.forEach(function (entry) { const video = entry.target; prepareVideo(video); if ( entry.isIntersecting && entry.intersectionRatio >= 0.15 ) { safePlay(video); } else { /* * Sur mobile on peut les mettre en pause : * contrairement aux tabs desktop, elles * sortent simplement du viewport. */ try { video.pause(); } catch (e) {} } }); }, { threshold: [0, 0.15, 0.5] }); /* * ============================================ * ENREGISTREMENT DES VIDEOS * ============================================ */ function registerVideos() { document.querySelectorAll(VIDEO_SELECTOR).forEach(function (video) { prepareVideo(video); if (!video.dataset.niryoVideoObserved) { video.dataset.niryoVideoObserved = '1'; mobileObserver.observe(video); } }); } registerVideos(); /* * ============================================ * ELEMENTOR / LOOP DYNAMIQUE * ============================================ */ const mutationObserver = new MutationObserver(function (mutations) { let hasNewContent = false; mutations.forEach(function (mutation) { if (mutation.addedNodes.length) { hasNewContent = true; } }); if (hasNewContent) { registerVideos(); } }); mutationObserver.observe(document.body, { childList: true, subtree: true }); /* * ============================================ * INITIALISATION * ============================================ */ setTimeout(function () { registerVideos(); if (window.innerWidth >= 768) { refreshDesktopTabVideos(); } }, 500); setTimeout(function () { if (window.innerWidth >= 768) { refreshDesktopTabVideos(); } }, 1200); /* * ============================================ * RESIZE / ORIENTATION * ============================================ */ let resizeTimer; window.addEventListener('resize', function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { registerVideos(); if (window.innerWidth >= 768) { refreshDesktopTabVideos(); } }, 250); }); });