Improve custom cursor on project details page

Cannot make it work over YouTube iframe. Instead just make it disappear and allow the default pointer cursor when hovering the iframe.

src/components/ui/YouTubeEmbed.astro

@@ -29,5 +29,6 @@ const { videoId, width = 560, height = 315 } = Astro.props;
         left: 0;
         width: 100%;
         height: 100%;
+        z-index: 1;
     }
 </style>

src/layouts/Layout.astro

@@ -47,6 +47,17 @@ const { site_title, site_description, email, socials } = Astro.props;
             const cursorY = event.clientY + window.scrollY;
             cursor.style.left = `${cursorX}px`;
             cursor.style.top = `${cursorY}px`;
+        });
+
+		const iframe = document.querySelector('.iframe-box iframe');
+        iframe?.addEventListener('mouseenter', () => {
+            cursor.style.display = 'none'; 
+        });
+
+        iframe?.addEventListener('mouseleave', () => {
+            cursor.style.display = 'block'; 
         });
     });
+
+
 </script>

src/layouts/SubLayout.astro → src/layouts/ProjectLayout.astro

@@ -43,3 +43,29 @@ const { site_title, site_description, email, socials } = Astro.props;
 		<Footer />
 	</body>
 </html>
+
+<script>
+    window.addEventListener('load', () => {
+        const cursor = document.createElement('div');
+        cursor.className = 'custom-cursor';
+        document.body.appendChild(cursor);
+
+        document.addEventListener('mousemove', (event) => {
+            const cursorX = event.clientX + window.scrollX;
+            const cursorY = event.clientY + window.scrollY;
+            cursor.style.left = `${cursorX}px`;
+            cursor.style.top = `${cursorY}px`;
+        });
+
+		const iframe = document.querySelector('.iframe-box iframe');
+        iframe?.addEventListener('mouseenter', () => {
+            cursor.style.display = 'none'; 
+        });
+
+        iframe?.addEventListener('mouseleave', () => {
+            cursor.style.display = 'block'; 
+        });
+    });
+
+
+</script>

src/pages/projects/[slug].astro

@@ -1,6 +1,6 @@
 ---
 import { parseSiteConfig } from "../../config";
-import SubLayout from "../../layouts/SubLayout.astro";
+import SubLayout from "../../layouts/ProjectLayout.astro";
 import { getCollection } from "astro:content";
 
 export async function getStaticPaths() {

src/styles/global.css

@@ -32,6 +32,8 @@ a,
 input,
 textarea,
 select,
+img,
+div#player,
 button:hover,
 a:hover {
     cursor: none !important;