alla-tms/plans/fixing-black-screen-video.md

You are a Senior Frontend Engineer working on a Next.js 16 + React + TypeScript project.

Task: Fix the Online Lesson Detail page where YouTube videos show a black screen inside the iframe.

Important: Before editing code, inspect the existing implementation and follow project rules:

1. AGENTS.md
2. docs/AI_DEVELOPMENT_GUIDE.md
3. docs/PROJECT_ARCHITECTURE.md

Scope: Only fix the YouTube embed issue. Do not change unrelated UI, layout, API, React Query logic, or business logic.

Requirements:

1. Locate the OnlineLessonDetailPage component.
2. Review the existing getEmbeddableVideoUrl() function.
3. Improve the YouTube URL parser to support:
   • https://www.youtube.com/watch?v=VIDEO_ID
   • https://youtube.com/watch?v=VIDEO_ID
   • https://m.youtube.com/watch?v=VIDEO_ID
   • https://youtu.be/VIDEO_ID
   • https://youtu.be/VIDEO_ID?si=xxxxx
   • https://www.youtube.com/shorts/VIDEO_ID
   • https://www.youtube.com/embed/VIDEO_ID
   • URLs with timestamp parameters such as &t=30s
4. The parser must return: https://www.youtube.com/embed/VIDEO_ID
5. If the URL is invalid or not supported, return null.
6. Remove the sandbox attribute from the YouTube iframe.
7. Update iframe attributes to: allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen referrerPolicy="strict-origin-when-cross-origin"
8. Keep uploaded video rendering unchanged.
9. Keep fallback Card behavior unchanged.
10. Do not use any.
11. Ensure TypeScript and ESLint pass.

After implementation: Create /docs/ai/report.md with:

• Summary
• Files changed
• Root cause
• Changes made
• Testing checklist
• Risks
• Rollback plan

Testing checklist must include:

• youtube.com/watch URL
• youtu.be URL
• Shorts URL
• Embed URL
• Mobile YouTube URL
• URL with timestamp
• Invalid URL
• Local uploaded video
• Existing fallback button
• Responsive layout

Return a concise summary after completing the changes.