.loading-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; z-index: 100; } .loading-spinner { width: 50px; height: 50px; border: 3px solid #333; border-top: 3px solid #fff; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .welcome-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; color: white; padding: 20px; } .welcome-logo { width: 120px; height: 120px; border-radius: 20px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .welcome-title { font-size: 3rem; font-weight: 700; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .welcome-subtitle { font-size: 1.2rem; opacity: 0.9; margin-bottom: 40px; max-width: 600px; line-height: 1.6; } .instructions { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 15px; padding: 30px; max-width: 800px; margin: 0 auto; } .instructions h3 { color: #fff; margin-bottom: 20px; font-size: 1.5rem; } .instructions p { margin-bottom: 15px; line-height: 1.6; } .instructions code { background: rgba(0, 0, 0, 0.3); padding: 8px 12px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 0.9rem; display: block; margin: 10px 0; word-break: break-all; border: 1px solid rgba(255, 255, 255, 0.1); } .btn { background: linear-gradient(45deg, #667eea, #764ba2); color: white; border: none; padding: 12px 24px; border-radius: 25px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s ease; text-decoration: none; display: inline-block; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } .btn-icon { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: white; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; font-size: 1.2rem; } .btn-icon:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); } .error-message { background: rgba(244, 67, 54, 0.2); border: 1px solid rgba(244, 67, 54, 0.4); color: #fff; border-radius: 10px; padding: 20px; margin: 20px 0; backdrop-filter: blur(10px); } .success-message { background: rgba(76, 175, 80, 0.2); border: 1px solid rgba(76, 175, 80, 0.4); color: #fff; border-radius: 10px; padding: 20px; margin: 20px 0; backdrop-filter: blur(10px); } .url-display { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 15px; margin: 20px 0; word-break: break-all; font-family: 'Courier New', monospace; font-size: 0.9rem; color: #fff; backdrop-filter: blur(10px); } /* Responsive Design */ @media (max-width: 768px) { .header { padding: 10px 15px; flex-direction: column; gap: 10px; } .logo-section { gap: 10px; } .logo { height: 30px; } .title { font-size: 1.2rem; } .welcome-title { font-size: 2rem; } .welcome-logo { width: 80px; height: 80px; } .instructions { padding: 20px; margin: 20px; } .controls-header { gap: 10px; } } @media (max-width: 480px) { .welcome-title { font-size: 1.5rem; } .welcome-subtitle { font-size: 1rem; } .instructions { padding: 15px; } } /* Animation cho smooth transitions */ .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

🎬 Fullscreen Video Player

Trải nghiệm xem video YouTube fullscreen với thiết kế hiện đại và responsive

🚀 Cách sử dụng:

Thêm parameter videourl vào URL để chơi video:

📋 Ví dụ:

http://localhost/index.html?videourl=https://www.youtube.com/embed/VIDEO_ID

🎯 URL đầy đủ:

http://localhost/index.html?videourl=https://www.youtube.com/embed/O-jeg259pvI?controls=0&modestbranding=0&playsinline=0&rel=0&disablekb=1

✨ Tính năng:

  • 🖥️ Fullscreen responsive design
  • 📱 Tối ưu cho mobile
  • 🎮 Controls ẩn/hiện tự động
  • 🔄 Refresh video
  • ⛶ Toggle fullscreen