From 1db0ea303fa45fd540cf6b1d838e8685d35af209 Mon Sep 17 00:00:00 2001
From: PARTH-TUSSLE <parthgartan26feb@gmail.com>
Date: Sat, 20 Jun 2026 23:31:35 +0530
Subject: [PATCH 1/5] Fix Error 153 in Cloud Native Playground YouTube embed

Signed-off-by: PARTH-TUSSLE <parthgartan26feb@gmail.com>
---
 .../DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx  | 2 +-
 .../DashboardWidgets/GettingStartedWidget/JourneyModal.tsx     | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx
index 70499ff61..ec7884aed 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx
@@ -30,7 +30,7 @@ export interface JourneyStep {
   content: React.ReactNode;
   image?: string;
   videoSrc?: string;
-  video?: boolean;
+  video?: string;
   embed?: boolean;
   previousButton?: boolean;
   isFullScreenModeAllowed?: boolean;
diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index 7194f3662..815e360ea 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -152,10 +152,11 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
               aspectRatio: '16/9',
               width: '100%'
             }}
-            src="https://www.youtube.com/embed/Do7htKrRzDA?si=5iMQ5a1JUf3qpIiH"
+            src={data.video}
             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>
         ) : (
           ''

From 00000e2157210adb666ebc6d4fd2938df865aa6a Mon Sep 17 00:00:00 2001
From: Parth Gartan <parthgartan26feb@gmail.com>
Date: Sat, 20 Jun 2026 23:41:42 +0530
Subject: [PATCH 2/5] Update
 src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: Parth Gartan <parthgartan26feb@gmail.com>
---
 .../DashboardWidgets/GettingStartedWidget/JourneyModal.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index 815e360ea..9a19e069d 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -152,7 +152,7 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
               aspectRatio: '16/9',
               width: '100%'
             }}
-            src={data.video}
+            src={data.video ?? undefined}
             title="YouTube video player"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             allowFullScreen={true}

From d35cd826f9d60d5f0b36e723d2c3b434c9dc7244 Mon Sep 17 00:00:00 2001
From: PARTH-TUSSLE <parthgartan26feb@gmail.com>
Date: Sun, 21 Jun 2026 10:18:23 +0530
Subject: [PATCH 3/5] Add loading=lazy to the video iframe

Signed-off-by: PARTH-TUSSLE <parthgartan26feb@gmail.com>
---
 .../DashboardWidgets/GettingStartedWidget/JourneyModal.tsx       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index 9a19e069d..66b7bca24 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -157,6 +157,7 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             allowFullScreen={true}
             referrerPolicy="strict-origin-when-cross-origin"
+            loading="lazy"
           ></iframe>
         ) : (
           ''

From bf82887ea0b9593f42e32865bb9cd301db1c720d Mon Sep 17 00:00:00 2001
From: PARTH-TUSSLE <parthgartan26feb@gmail.com>
Date: Mon, 22 Jun 2026 22:34:20 +0530
Subject: [PATCH 4/5] Revert the suggestion for video src fallback

Signed-off-by: PARTH-TUSSLE <parthgartan26feb@gmail.com>
---
 .../DashboardWidgets/GettingStartedWidget/JourneyModal.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index 66b7bca24..dbc978918 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -152,7 +152,7 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
               aspectRatio: '16/9',
               width: '100%'
             }}
-            src={data.video ?? undefined}
+            src={data.video}
             title="YouTube video player"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             allowFullScreen={true}

From dcc4f5c924478b66655be4e935d21a747874ef55 Mon Sep 17 00:00:00 2001
From: Parth Gartan <parthgartan26feb@gmail.com>
Date: Sun, 28 Jun 2026 16:38:59 +0000
Subject: [PATCH 5/5] fix: gracefully handle youtube embed errors in
 JourneyModal

Signed-off-by: Parth Gartan <parthgartan26feb@gmail.com>
---
 .../GettingStartedWidget/JourneyModal.tsx     | 45 ++++++++++++++-----
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index dbc978918..16d88e29a 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -3,6 +3,7 @@
 import MesheryDesignEmbedUmd from '@layer5/meshery-design-embed';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
+import { Link, Box } from '@mui/material';
 import { styled } from '../../../theme';
 import { JourneyStep, ProfileData, StepData } from './GetStartedModal';
 import ReusableModal from './ReusableModal';
@@ -38,6 +39,23 @@ export const ModalVideo = styled('video')(() => ({
   paddingBlock: '1rem'
 }));
 
+const FallbackLink: React.FC<{ video: string }> = ({ video }) => {
+  const watchLink = video.replace('/embed/', '/watch?v=');
+  return (
+    <Box sx={{ textAlign: 'center', my: 2 }}>
+      <Link
+        href={watchLink}
+        target="_blank"
+        rel="noopener noreferrer"
+        underline="hover"
+        sx={{ fontWeight: 'bold' }}
+      >
+        ▶ Having trouble viewing? Watch on YouTube
+      </Link>
+    </Box>
+  );
+};
+
 const JourneyModal: React.FC<JourneyModalProps> = ({
   open,
   handleClose,
@@ -147,18 +165,21 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
           ''
         )}
         {data.video !== undefined ? (
-          <iframe
-            style={{
-              aspectRatio: '16/9',
-              width: '100%'
-            }}
-            src={data.video}
-            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"
-            loading="lazy"
-          ></iframe>
+          <div>
+            <iframe
+              style={{
+                aspectRatio: '16/9',
+                width: '100%'
+              }}
+              src={data.video}
+              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"
+              loading="lazy"
+            ></iframe>
+            <FallbackLink video={data.video} />
+          </div>
         ) : (
           ''
         )}