📝 Summary

Currently, clicking the educational video thumbnails in the sidebar (e.g., "Dynamic booking links") redirects the user to YouTube in a new browser tab. This behavior forces a context switch, removing the user from the application environment and exposing them to external distractions via YouTube's algorithm-driven recommendations.

To improve application stickiness and user focus, these videos should be rendered within an on-platform modal (lightbox).

🎯 Expected Behavior

• User Action: User clicks the "Play" button on a sidebar video thumbnail.
• System Response: A modal overlay appears over the current dashboard, containing an embedded video player.
• UX Flow: The user watches the content without leaving the Event Types page. Upon closing the modal, they resume their previous workflow immediately.
• Content: The video player should ideally be restricted to show related videos only from the official Cal.com channel (or hide related videos entirely) to maintain professional focus.

⚡ Current Behavior

• User Action: User clicks the sidebar video thumbnail.
• System Response: The browser opens a new tab and navigates to the external YouTube URL.
• UX Issue: This disrupts the user journey and increases the likelihood of "cognitive drift" or site abandonment due to external distractions.

🔁 Steps to Reproduce

1. Log in to the application.
2. Navigate to the Event Types dashboard (or any page where the sidebar is visible).
3. Locate the Dynamic booking links (or similar) video card in the bottom-left sidebar.
4. Click the "Play" icon/thumbnail.
5. Observe that the application directs the user to an external YouTube page.

Screenshot

💻 Context (Environment)

• OS: [e.g. macOS / Windows]
• Browser: [e.g. Chrome, Safari, Firefox]
• App Version: [e.g. v4.1.0]

🛠 Possible Implementation

1. Component Logic:

   • Modify the sidebar video component to intercept the click event (onClick).
   • Prevent default browser navigation.
   • Trigger a Global Modal/Dialog state (e.g., using the existing Dialog component from the UI library).

2. Video Rendering:

   • Inside the modal, implement a lite-youtube-embed or standard iframe.
   • Use the YouTube Embed API parameters to optimize the experience:
     • modestbranding=1 (To reduce YouTube UI clutter).
     • rel=0
       (Note: While YouTube deprecated disabling related videos entirely, setting this ensures related videos come from the same channel- Cal.com- rather than the user's watch history).