.home_iframe { width: 100%; aspect-ratio: 16/9; } @media screen and (max-width: 1200px) { .home_iframe { max-height: 100svh } } const iframe = document.querySelector(".home_iframe"); iframe.addEventListener("load", () => { const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; const pollButtons = setInterval(() => { const backbtns = iframeDoc.querySelector(".buttons-back-container"); const footer = iframeDoc.querySelector(".footer"); if (window.screen.height == window.innerHeight) { moveUp(iframeDoc, backbtns, footer); return; } if (backbtns && footer) { clearInterval(pollButtons); if (calculateScrollPercent() > 20) { moveUp(iframeDoc, backbtns, footer); } else { moveDown(iframeDoc, backbtns, footer); } window.addEventListener("scroll", () => { if (calculateScrollPercent() > 20) { moveUp(iframeDoc, backbtns, footer); } else { moveDown(iframeDoc, backbtns, footer); } }); } }, 300); }); function moveUp(iframeDoc, backbtns, footer) { backbtns.style.top = "50%"; backbtns.style.transform = "translateY(-50%)"; backbtns.style.aspectRatio = "16 / 9"; footer.style.top = "50%"; footer.style.transform = "translateY(-50%)"; footer.style.aspectRatio = "16 / 9"; } function moveDown(iframeDoc, backbtns, footer) { backbtns.style.top = "85svh"; backbtns.style.transform = "translateY(-100%)"; backbtns.style.aspectRatio = "none"; footer.style.top = "85svh"; footer.style.transform = "translateY(-100%)"; footer.style.aspectRatio = "none"; } const calculateScrollPercent = () => { const scrollTop = window.scrollY || document.documentElement.scrollTop; return scrollTop; };