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..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 (
+
+
+ ▶ Having trouble viewing? Watch on YouTube
+
+
+ );
+};
+
const JourneyModal: React.FC = ({
open,
handleClose,
@@ -147,16 +165,21 @@ const JourneyModal: React.FC = ({
''
)}
{data.video !== undefined ? (
-
+
+
+
+
) : (
''
)}