Fix Error 153 in Cloud Native Playground YouTube embed

[PARTH-TUSSLE]

Notes for Reviewers

Description

This PR addresses the "Error 153" video player configuration issue that occurs in the Cloud Native Playground modal (JourneyModal.tsx) when viewed by users with strict privacy settings, browser shields (e.g., Brave), or ad-blockers.
The Problem:
When strict privacy configurations block the YouTube iframe embed, the player throws a configuration error (Error 153).
The Solution:
To ensure a robust and graceful user experience, this PR introduces a permanent FallbackLink component rendered immediately beneath the iframe.

• It automatically parses the data.video embed URL and transforms it into a direct YouTube watch?v= hyperlink.
• It provides a reliable fallback: Having trouble viewing? Watch on YouTube
• The link is constructed using Material UI's <Box> and <Link> components, ensuring it natively inherits Sistent's global theme, colors, and hover states without relying on hardcoded CSS or hex colors.

This PR fixes #20118(meshery) -> meshery/meshery#20118

Signed commits

• [ ✅] Yes, I signed my commits.

[gemini-code-assist]

Code Review

This pull request updates the JourneyStep interface to change the video property from a boolean to a string, and updates JourneyModal to dynamically load the video source from data.video instead of using a hardcoded YouTube URL. It also adds a referrerPolicy attribute to the iframe. The reviewer suggested using a nullish coalescing operator (data.video ?? undefined) to prevent potential runtime issues or rendering an iframe with an invalid src="null" if data.video is null.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[Junnygram]

Add loading="lazy" to the iframe

[PARTH-TUSSLE]

Add loading="lazy" to the iframe

Thanks for the suggestion.

[chaitanyamedidar]

Good! While you're at it, to ensure GDPR compliance and avoid strict browser cookie blockers, I'm thinking we should update the actual URL passed from the Meshery UI to use YouTube's official privacy-enhanced mode (https://www.youtube-nocookie.com/embed/Do7htKrRzDA) and drop the ?si= tracking parameter. What do you think?

[PARTH-TUSSLE]

Good! While you're at it, to ensure GDPR compliance and avoid strict browser cookie blockers, I'm thinking we should update the actual URL passed from the Meshery UI to use YouTube's official privacy-enhanced mode (https://www.youtube-nocookie.com/embed/Do7htKrRzDA) and drop the ?si= tracking parameter. What do you think?

That's a great idea! I've updated the URL in meshery/ui to use youtube-nocookie.com and removed the tracking parameter. Now the embedded video is much more privacy-friendly for anyone using the Meshery dashboard . I've also opened a PR in the meshery repo for the same -> meshery/meshery#20184

[leecalcote]

Thank you much for this, @PARTH-TUSSLE! 👏

[miacycle]

@PARTH-TUSSLE this needs to be implemented more thoughtfully. Use of nocookies domain is not ideal.

[PARTH-TUSSLE]

@PARTH-TUSSLE this needs to be implemented more thoughtfully. Use of nocookies domain is not ideal.

Another approach would be to keep the standard YouTube domain but implement proper error handling. If the player throws an error (like 153 due to a strict browser or ad-blocker), we should catch it and render a fallback UI - like a thumbnail with a direct "Watch on YouTube" link, so the user isn't just staring at an error state.
What do you think @miacycle ?

[PARTH-TUSSLE]

Hey @miacycle , I have updated the PR with a more thoughtful, robust solution, would appreciate a review