update

Author: YousefMohamd

js/site.js

@@ -1,118 +1,68 @@
 // Showreel slider
-
 (function() {
-
   const container = document.getElementById('showreel');
-
   if (!container) return;
 
-
   const slides = Array.from(container.querySelectorAll('.slide'));
-
   if (slides.length === 0) return;
 
-
   let currentIndex = 0;
 
-
-// إظهار أول شريحة فوراً
-
+  // إظهار أول شريحة فوراً
   slides[0].classList.add('active');
 
-
-// تشغيل أول فيديو لو موجود
-
+  // تشغيل أول فيديو لو موجود
   const firstVideo = slides[0].querySelector('video');
-
   if (firstVideo) {
-
     firstVideo.play().catch(() => {});
-
   }
 
-
   function showSlide(index) {
-
     slides.forEach((s, i) => {
-
       s.classList.toggle('active', i === index);
-
       const video = s.querySelector('video');
 
-
       if (video) {
-
         if (i === index) {
-
-// تشغيل الفيديو للشريحة النشطة فقط
-
+          // تشغيل الفيديو للشريحة النشطة فقط
           video.currentTime = 0;
-
           video.play().catch(() => {});
-
         } else {
-
-// إيقاف الفيديوهات في الشرائح المخفية لتوفير الأداء
-
+          // إيقاف الفيديوهات في الشرائح المخفية لتوفير الأداء
           video.pause();
-
         }
-
       }
-
     });
-
   }
 
-
   function nextSlide() {
-
     currentIndex = (currentIndex + 1) % slides.length;
-
     showSlide(currentIndex);
-
   }
 
-
-// تغيير الشريحة كل 5 ثواني
-
+  // تغيير الشريحة كل 5 ثواني
   setInterval(nextSlide, 5000);
-
 })();
 
-
 // Facade Pattern for Vimeo videos
-
 document.addEventListener("DOMContentLoaded", function () {
-
   const videoWrappers = document.querySelectorAll(".video-wrapper");
 
-
   videoWrappers.forEach((wrapper) => {
-
     const playButton = wrapper.querySelector(".facade-play-btn");
-
     const iframe = wrapper.querySelector("iframe");
 
-
     if (playButton) {
-
       playButton.addEventListener("click", function () {
-
-        playButton.style.display = "none"; // إخفاء الزر
+        playButton.style.display = "none"; // Hide the play button
+        wrapper.classList.add("is-playing"); // Add the playing class for visual effects
 
         if (iframe) {
-
-          iframe.src = iframe.dataset.src; // تعيين src للإطار
-
+          iframe.src = iframe.dataset.src; // Set the iframe source
         }
 
         wrapper.style.cursor = "default";
-
       });
-
     }
-
   });
-
-})
+});

projects/short-film-projects.njk

@@ -12,9 +12,9 @@ title: Short Film Projects
         <h3 class="w3-text-light-grey" style="margin:18px 0 8px;">{{ p.data.title }}</h3>
 
         {% if p.data.vimeoId %}
-          <div class="video-wrapper" style="aspect-ratio: 16 / 9; width: 100%; background-image: url('https://vumbnail.com/{{ p.data.vimeoId }}.jpg'); background-size: cover; background-position: center; cursor: pointer; position: relative;">
+          <div class="video-wrapper" style="background-image: url('https://vumbnail.com/{{ p.data.vimeoId }}.jpg');">
 
-            <!-- زر التشغيل بالتصميم الزجاجي الجديد -->
+            <!-- زر التشغيل بالتصميم الزجاجي والموجة الزجزاجية -->
             <button class="facade-play-btn" type="button" aria-label="Play video">
               <svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true">
                 <path d="M8 5.2v13.6L19 12z" fill="currentColor"/>
@@ -44,7 +44,29 @@ title: Short Film Projects
 </div>
 
 <style>
-/* التصميم الزجاجي والموجة الزجزاجية (Glassmorphism & Zigzag Wave) */
+/* Video Wrapper Styling with Curved Edges & Isolation */
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background-size: cover;
+  background-position: center;
+  cursor: pointer;
+  border-radius: 16px;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.video-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+/* Glassmorphism Play Button */
 .facade-play-btn {
   position: absolute;
   top: 50%;
@@ -71,7 +93,7 @@ title: Short Film Projects
   transform: translate(-50%, -50%) scale(1.08);
 }
 
-/* تأثير الموجة الكلاسيكية خلف الزر */
+/* Classic Zigzag Wave Animation */
 .facade-play-btn::before {
   content: '';
   position: absolute;
@@ -105,4 +127,21 @@ title: Short Film Projects
 .facade-play-btn svg {
   fill: currentColor;
 }
+
+/* Cinematic Ambient Glow & Poster Removal on Play */
+.video-wrapper.is-playing {
+  background-image: none !important;
+}
+
+.video-wrapper.is-playing::before {
+  content: '';
+  position: absolute;
+  inset: -10px;
+  background: radial-gradient(closest-side, oklch(1 0 0 / 0.2), transparent);
+  filter: blur(25px);
+  z-index: -1;
+  opacity: 0.6;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
 </style>