From 23e2d151c146053d5aa77d6f56fbd856c21050aa Mon Sep 17 00:00:00 2001
From: Parth Gartan <parthgartan26feb@gmail.com>
Date: Tue, 7 Jul 2026 07:05:07 +0000
Subject: [PATCH 1/2] Resolve YouTube Error 153 and add graceful degradation in
 JourneyModal

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

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index 7194f3662..70a80745c 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -38,6 +38,20 @@ export const ModalVideo = styled('video')(() => ({
   paddingBlock: '1rem'
 }));
 
+const FallbackLink = styled('div')(({ theme }) => ({
+  textAlign: 'center',
+  marginTop: '0.5rem',
+  marginBottom: '1rem',
+  '& a': {
+    color: theme.palette.text.brand,
+    textDecoration: 'none',
+    fontWeight: 'bold',
+    '&:hover': {
+      textDecoration: 'underline'
+    }
+  }
+}));
+
 const JourneyModal: React.FC<JourneyModalProps> = ({
   open,
   handleClose,
@@ -147,16 +161,28 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
           ''
         )}
         {data.video !== undefined ? (
-          <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}
-          ></iframe>
+          <>
+            <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>
+          </>
         ) : (
           ''
         )}

From 41e33540b5d9d34b0990f9c0b2ac4bc7223a73c6 Mon Sep 17 00:00:00 2001
From: Parth Gartan <parthgartan26feb@gmail.com>
Date: Tue, 7 Jul 2026 07:23:57 +0000
Subject: [PATCH 2/2] Add fallbackText prop for i18n and extract
 YOUTUBE_VIDEO_ID constant

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

diff --git a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
index 70a80745c..89e07d2e0 100644
--- a/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
+++ b/src/custom/DashboardWidgets/GettingStartedWidget/JourneyModal.tsx
@@ -18,8 +18,11 @@ interface JourneyModalProps {
   };
   profileData?: ProfileData;
   embedDesignPath: string;
+  fallbackText?: string;
 }
 
+const YOUTUBE_VIDEO_ID = 'Do7htKrRzDA';
+
 const stepperType = {
   Previous: 'Previous',
   Next: 'Next'
@@ -60,7 +63,8 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
   stepsData,
   useNotificationHandlers,
   profileData,
-  embedDesignPath
+  embedDesignPath,
+  fallbackText = '▶ Having trouble viewing? Watch on YouTube'
 }) => {
   const [currentModal, setCurrentModal] = useState<number>(0);
   const [step, setStep] = useState<StepData | null>(null);
@@ -167,7 +171,7 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
                 aspectRatio: '16/9',
                 width: '100%'
               }}
-              src="https://www.youtube.com/embed/Do7htKrRzDA?si=5iMQ5a1JUf3qpIiH"
+              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}
@@ -175,11 +179,11 @@ const JourneyModal: React.FC<JourneyModalProps> = ({
             ></iframe>
             <FallbackLink>
               <a
-                href="https://www.youtube.com/watch?v=Do7htKrRzDA"
+                href={`https://www.youtube.com/watch?v=${YOUTUBE_VIDEO_ID}`}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                ▶ Having trouble viewing? Watch on YouTube
+                {fallbackText}
               </a>
             </FallbackLink>
           </>