Fix Error 153 in Cloud Native Playground YouTube embed

[PARTH-TUSSLE]

Notes for Reviewers

This PR fixes #20118(meshery)

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.

[gemini-code-assist]

To prevent potential runtime issues or rendering an iframe with an invalid src="null" if data.video is null (which can happen with API/JSON payloads where optional fields are sent as null instead of omitted), use a nullish coalescing operator to provide a safe fallback.

Suggested change

	src={data.video}
	src={data.video ?? undefined}

[PARTH-TUSSLE]

Yupp, we wouldn't want runtime issue just because of some iframe tag

[leecalcote]

What is displayed when there is no video source defined?

[PARTH-TUSSLE]

If data.video is not defined, the conditional check {data.video !== undefined ? ... : ''} evaluates to an empty string (''), so the iframe is completely omitted from the DOM.
There's no default fallback placeholder or blank UI box rendered. Instead, the modal falls back to rendering whichever other media property happens to be defined for that specific journey step (for example, , an mp4 via , or a design via ).
If a step is configured with absolutely no media properties at all, the modal simply skips the media block entirely and cleanly shifts up the text block ({data.content}) to the top of the modal body.
That covers every possible edge case ig.

[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?

[fitzergerald]

Why is the video source now undefined?

[PARTH-TUSSLE]

@fitzergerald It's not explicitly undefined. This is a defensive fallback using the nullish coalescing operator (??). If data.video happens to be exactly null (which can occur if an API response includes a null value instead of omitting the field entirely), React would normally render <iframe src="null">, which is an invalid source and breaks the iframe. By falling back to undefined, React knows to completely omit the src attribute until a valid URL is available, preventing the error!

[banana-three-join]

The code is receiving a regression. You're re-introducing the usage of an undefined variable when it's not desired (Take a look at the condition above). If data.video is non-existent then it shouldn't render anything, hence why you were asked to change this, so please revert the change.

[PARTH-TUSSLE]

Yeah, the outer condition data.video !== undefined already handles whether the iframe should render. Using the suggestion would have caused an empty iframe to render if the data was null. I've reverted the change.

[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

[banana-three-join]

The code is receiving a regression. You're re-introducing the usage of an undefined variable when it's not desired (Take a look at the condition above). If data.video is non-existent then it shouldn't render anything, hence why you were asked to change this, so please revert the change.

[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 ?