[FEATURE] Restrict YouTube recommendations to AsyncAPI channel for roadmap video embeds

[Anexus5919]

Why do we need this improvement?

Currently, the YouTube video embedded in the AsyncAPI Roadmap page (https://www.asyncapi.com/roadmap) displays unrelated video recommendations when the video is paused or ends. These recommendations are influenced by the viewer’s personal YouTube watch history rather than AsyncAPI-related content.

This behavior can distract users, pull them away from the AsyncAPI website, and break the learning flow—especially for contributors and users exploring SIG meetings and roadmap context.

How will this change help?

This improvement would:

• Keep users focused on AsyncAPI-specific educational content
• Strengthen AsyncAPI branding by promoting its own YouTube content
• Improve user retention and learning continuity
• Reduce external distractions caused by unrelated YouTube recommendations
• Provide a more controlled and consistent documentation experience

Screenshots

1. On pausing

2. On completion

How could it be implemented/designed?

Possible approaches:

1. Improve the YouTube embed configuration (baseline improvement)

• Replace the external react-youtube-embed dependency with a local embed component.
• Use youtube-nocookie.com for improved privacy.
• Apply YouTube embed parameters:
• rel=0 to limit related videos to the same channel where possible
• modestbranding=1 to reduce YouTube UI noise
• enablejsapi=1 to allow playback state detection
• Preserve existing query parameters such as start time.

This provides an immediate, non-breaking improvement with minimal implementation overhead.

2. Modal-based playback with custom recommendations (preferred UX)

• On clicking the video thumbnail or play button, open the video inside an in-app modal instead of playing inline.
• Embed the video inside the modal using a custom YouTubeEmbed component with a responsive 16:9 layout.
• Use the YouTube IFrame API to listen for player state changes.

This approach avoids YouTube’s native recommendation UI and gives AsyncAPI full control over the post-playback experience, improving focus, content continuity, and user retention.

🚧 Breaking changes

No

👀 Have you checked for similar open issues?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[Devansh-dvd]

@princerajpoot20 sir please assign this issue to me

[Anexus5919]

@Devansh-dvd Thanks for your interest in this issue. I’ve already worked on it and am currently preparing the PR. Feel free to pick up any other open issues in the meantime. Appreciate your willingness to contribute!

[Anexus5919]

@princerajpoot20 I’ve raised the related issue for this PR. Since the PR review depends on issue approval, could you please take a look when you have time? Happy to make any updates if needed. Thanks! 🙏

[Anexus5919]

@princerajpoot20 @sambhavgupta0705 I’ve raised the related issue for this PR. Since the PR review depends on issue approval, could you please take a look when you have time? Happy to make any updates if needed. Thanks! 🙏

[Anexus5919]

@princerajpoot20 @sambhavgupta0705 It’s been weeks since this issue was raised, and there hasn’t been any response or even acknowledgment from the maintainers.

If issues cannot be reviewed in a reasonable timeframe, contributors like us get discouraged to continue investing effort into improving the project.