wwww /* تصميم الفيديو المضمن */ .videoContainer { display: none; text-align: center; margin-top: 50px; } /* تصميم الفريم */ .videoFrame { width: 640px; height: 360px; border: none; } /* ستايلات الزر */ .play-button { width: 120px; height: 120px; cursor: pointer; border-radius: 50%; background: linear-gradient(45deg, #ff4d4d, #cc0000); box-shadow: 0 0 0 10px rgba(255, 77, 77, 0.2); /* ظل للزر */ display: flex; justify-content: center; align-items: center; overflow: hidden; animation: pulse 1.5s infinite; } /* حركة النبض */ @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(255, 77, 77, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); } } /* زر التشغيل داخل الزر */ .play-button::after { content: ''; position: absolute; left: 40%; /* تعديل قيمة الـ left لوسط الصورة */ top: 35%; /* تعديل قيمة الـ top لوسط الصورة */ width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 30px solid white; } function showVideo(clickedButton) { var videoContainer = clickedButton.nextElementSibling; clickedButton.style.display = "none"; // إخفاء الصورة عند النقر عليها videoContainer.style.display = "block"; // عرض الفيديو المضمن وسط الصفحة }
