Resolve YouTube Error 153 and add graceful degradation in JourneyModal

[PARTH-TUSSLE]

Notes for Reviewers

Description

This PR resolves "Error 153: Video player configuration error" that occurs in the Getting Started widget's YouTube iframe when running on localhost (insecure HTTP) due to the browser's default cross-origin referrer policy.

Changes Made

• Added referrerPolicy="strict-origin-when-cross-origin" to the existing YouTube iframe in JourneyModal.tsx.

Related issue -> meshery/meshery#20118
Related PR -> meshery/meshery#20520

Signed commits

• [✅] Yes, I signed my commits.

Summary by CodeRabbit

• Bug Fixes
  • Improved privacy and security when displaying embedded YouTube videos by applying stricter referrer handling.

[gemini-code-assist]

Code Review

This pull request adds a fallback link below the embedded YouTube video iframe in the JourneyModal component to allow users to watch the video directly on YouTube if they encounter issues, and updates the iframe with a strict referrer policy. The review feedback recommends extracting the hardcoded YouTube video ID into a constant to prevent duplication and exposing the fallback link text as a configurable prop to support internationalization and localization.

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]

Use the newly defined 'YOUTUBE_VIDEO_ID' constant and the 'fallbackText' prop here to avoid duplicating the hardcoded video ID and to support localization.

Suggested change

	<iframe
	style={{
	aspectRatio: '16/9',
	width: '100%'
	}}
	src="https://www.youtube.com/embed/Do7htKrRzDA?si=5iMQ5a1JUf3qpIiH"
	title="YouTube video player"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	allowFullScreen={true}
	referrerPolicy="strict-origin-when-cross-origin"
	></iframe>
	<FallbackLink>
	<a
	href="https://www.youtube.com/watch?v=Do7htKrRzDA"
	target="_blank"
	rel="noopener noreferrer"
	>
	▶ Having trouble viewing? Watch on YouTube
	</a>
	</FallbackLink>
	<iframe
	style={{
	aspectRatio: '16/9',
	width: '100%'
	}}
	src={"https://www.youtube.com/embed/" + YOUTUBE_VIDEO_ID + "?si=5iMQ5a1JUf3qpIiH"}
	title="YouTube video player"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	allowFullScreen={true}
	referrerPolicy="strict-origin-when-cross-origin"
	></iframe>
	<FallbackLink>
	<a
	href={"https://www.youtube.com/watch?v=" + YOUTUBE_VIDEO_ID}
	target="_blank"
	rel="noopener noreferrer"
	>
	{fallbackText}
	</a>
	</FallbackLink>

[PARTH-TUSSLE]

resolved

[PARTH-TUSSLE]

Incorporated! I've updated the JSX block to dynamically get the new YOUTUBE_VIDEO_ID constant into both the iframe src and the fallback link's href. I also replaced the hardcoded string inside the anchor tag with the new {fallbackText} prop as suggested.

[leecalcote]

I've previously given feedback that this isn't desired.

Nor is the hardcoding of a specific video id into a "reusable" component in our design system.

[PARTH-TUSSLE]

@KhushamBansal , @rishiraj38 , @Sbragul26.

[leecalcote]

Where is the link to your other PR and the feedback already received?

[PARTH-TUSSLE]

Where is the link to your other PR and the feedback already received?

@leecalcote I've updated the PR description with the open PR in meshery regarding this issue. And I actually closed the other PR ( the one which I was working on earlier ) because it had many commits now cause I was working on it for 2 weeks, and to start fresh from synced masters, I created new branches and PRs . Should I link the closed PR as well, in case someone wants to see the earlier reviews?

[leecalcote]

This widget shouldn't be included in Sistent in the first place.

[PARTH-TUSSLE]

This widget shouldn't be included in Sistent in the first place.

@leecalcote Agreed, sistent should only have reusable componenets. I was only making these changes here to fix the YouTube Error 153 on strict browsers bug , where the code currently lives. Along with this Getting started widget, there are several other specific widgets in Sistent right now (e.g., RecentDesignWidget, WorkspaceActivityWidget, TeamSearchField etc.). Should we now migrate the GettingStartedWidget (and potentially the other Dashboard widgets) directly into the meshery repository? Let me know how to proceed.

[coderabbitai]

📝 Walkthrough

Walkthrough

JourneyModal adds an explicit strict-origin-when-cross-origin referrer policy to the YouTube video iframe.

Changes

Journey video embedding

Layer / File(s)	Summary
YouTube iframe referrer policy src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx	The YouTube iframe now sets referrerPolicy to strict-origin-when-cross-origin.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Suggested reviewers: leecalcote

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title matches the YouTube iframe referrer-policy fix, though it overstates the diff by mentioning graceful degradation that isn't present.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}