Video Gallery
Home / Video Gallery
Video Gallery YouTube Channel Gallery
“🎓 Explore Abhyaas Classes’ video gallery! 🚀 Dive into NEET preparation tips, exciting student activities, and learning highlights. Watch, learn, and get inspired with Abhyaas Classes! ✨”
@keyframes glow {
0% { text-shadow: 0 0 5px #ff004f, 0 0 10px #ff004f; }
50% { text-shadow: 0 0 15px #ff8c00, 0 0 25px #ff8c00; }
100% { text-shadow: 0 0 5px #ff004f, 0 0 10px #ff004f; }
}
:root{ --card-w:320px; --card-h:420px; --depth:420px; --accent: 0, 200, 255; /* cyan glow */ --bg: #00023; } /* RESET */ *{box-sizing:border-box; -webkit-tap-highlight-color:transparent} /* MAIN CONTAINER */ .gallery-e-outer{ width:100%; display:flex; justify-content:center; align-items:center; padding:36px 12px; background:var(--bg); } /* 3D STAGE */ .gallery-e-stage{ width:100%; max-width:1100px; height:760px; display:flex; justify-content:center; align-items:center; position:relative; perspective:1600px; transition:transform .3s ease; } /* ROTOR */ .gallery-e-rotor{ width:var(--card-w); height:var(--card-h); position:relative; transform-style:preserve-3d; animation:gyro 36s linear infinite; transform-origin:center center; } /* pause on hover (desktop only) */ @media(hover:hover){ .gallery-e-stage:hover .gallery-e-rotor{ animation-play-state:paused } } /* INDIVIDUAL 3D CARDS */ .card-e{ position:absolute; width:var(--card-w); height:var(--card-h); left:50%; top:50%; transform-origin:center center; border-radius:16px; overflow:hidden; background:#060606; border:1px solid rgba(255,255,255,0.05); box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 36px rgba(var(--accent),0.08) inset; cursor:pointer; transition:transform .45s ease, box-shadow .45s ease; } /* thumbnails */ .card-e img.thumb{ width:100%; height:100%; object-fit:cover; pointer-events:none; } /* subtle neon edge */ .card-e::after{ content:""; position:absolute; inset:0; border-radius:16px; box-shadow:0 0 22px rgba(var(--accent),0.08), 0 0 3px rgba(var(--accent),0.10) inset; pointer-events:none; mix-blend-mode:screen; } /* HOVER ENHANCEMENT */ .card-e:hover{ transform:translateY(-10px) scale(1.06); box-shadow: 0 30px 90px rgba(0,0,0,0.75), 0 0 80px rgba(var(--accent),0.14), 0 0 40px rgba(255,0,0,0.45); } /* REAL YOUTUBE RED PLAY BUTTON — enhanced */ .play-e{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:#FF0000; display:flex; justify-content:center; align-items:center; box-shadow: 0 0 26px rgba(255,0,0,0.55), 0 0 60px rgba(255,0,0,0.40), inset 0 0 18px rgba(255,255,255,0.15); backdrop-filter:blur(2px); /* BLINK + PULSE */ animation:blinkPlay 1.35s ease-in-out infinite; z-index:5; } /* triangle */ .play-e::before{ content:""; width:0; height:0; border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:6px; } /* PLAY BUTTON SHINE / GLASS REFLECTION */ .play-e::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(145deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.0) 48%); pointer-events:none; mix-blend-mode:screen; } /* BLINK + BOOM PULSE */ @keyframes blinkPlay{ 0% { opacity:.70; transform:translate(-50%,-50%) scale(1); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.22); } 100% { opacity:.70; transform:translate(-50%,-50%) scale(1); } } /* 45° SPACING (8 cards) */ .card-e:nth-child(1){ transform:translate(-50%,-50%) rotateY(0deg) translateZ(var(--depth)); } .card-e:nth-child(2){ transform:translate(-50%,-50%) rotateY(45deg) translateZ(var(--depth)); } .card-e:nth-child(3){ transform:translate(-50%,-50%) rotateY(90deg) translateZ(var(--depth)); } .card-e:nth-child(4){ transform:translate(-50%,-50%) rotateY(135deg) translateZ(var(--depth)); } .card-e:nth-child(5){ transform:translate(-50%,-50%) rotateY(180deg) translateZ(var(--depth)); } .card-e:nth-child(6){ transform:translate(-50%,-50%) rotateY(225deg) translateZ(var(--depth)); } .card-e:nth-child(7){ transform:translate(-50%,-50%) rotateY(270deg) translateZ(var(--depth)); } .card-e:nth-child(8){ transform:translate(-50%,-50%) rotateY(315deg) translateZ(var(--depth)); } @keyframes gyro{ from{transform:rotateY(0deg)} to{transform:rotateY(360deg)} } /* LIGHTBOX */ .yt-lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.93); z-index:999999; justify-content:center; align-items:center; } .yt-lightbox.active{ display:flex } .yt-lightbox .frame{ width:92%; max-width:1200px; height:68vh; border-radius:14px; overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,0.8); border:1px solid rgba(255,255,255,0.06) } .yt-lightbox iframe{ width:100%; height:100%; border:0 } /* RESPONSIVE */ @media(max-width:900px){ :root{ --card-w:260px; --card-h:340px; --depth:300px } .gallery-e-stage{ height:620px } } @media(max-width:520px){ :root{ --card-w:190px; --card-h:260px; --depth:200px } .gallery-e-stage{ height:420px } .play-e{ width:48px; height:48px } }
(function(){ const rotor = document.getElementById("galleryRotor"); const cards = rotor.querySelectorAll(".card-e"); const lightbox = document.getElementById("ytLightbox"); const frame = document.getElementById("ytFrame"); cards.forEach(card=>{ card.addEventListener("click",()=>{ frame.src = `https://www.youtube.com/embed/${card.dataset.yt}?autoplay=1&rel=0&modestbranding=1`; lightbox.classList.add("active"); rotor.style.animationPlayState="paused"; }); }); lightbox.addEventListener("click",e=>{ if(e.target===lightbox){ lightbox.classList.remove("active"); frame.src=""; rotor.style.animationPlayState="running"; } }); })();
