diff --git a/package-lock.json b/package-lock.json
index d399c1dae..41a093ea3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,7 +69,7 @@
         "eslint": "^8.56.0",
         "husky": "^9.0.7",
         "postcss": "^8",
-        "prettier": "^3.2.4",
+        "prettier": "3.2.5",
         "prisma": "^5.6.0",
         "tailwindcss": "^3.3.0",
         "ts-node": "^10.9.2",
@@ -6743,11 +6743,10 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
-      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
diff --git a/package.json b/package.json
index 96748dc64..f02c6da12 100644
--- a/package.json
+++ b/package.json
@@ -45,8 +45,8 @@
     "dayjs": "^1.11.10",
     "discord-oauth2": "^2.11.0",
     "discord.js": "^14.14.1",
-    "fuse.js": "^7.0.0",
     "embla-carousel-react": "^8.0.0",
+    "fuse.js": "^7.0.0",
     "jose": "^5.2.2",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.321.0",
@@ -83,7 +83,7 @@
     "eslint": "^8.56.0",
     "husky": "^9.0.7",
     "postcss": "^8",
-    "prettier": "^3.2.4",
+    "prettier": "3.2.5",
     "prisma": "^5.6.0",
     "tailwindcss": "^3.3.0",
     "ts-node": "^10.9.2",
diff --git a/prisma/seed.ts b/prisma/seed.ts
index fe3ba0b86..9be7ad0f8 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -147,30 +147,54 @@ async function main() {
     data: {
       id: 1,
       contentId: 3,
-      video_1080p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_1080p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_720p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_1080p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_720p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_mp4_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      // video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      video_1080p_mp4_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_mp4_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_mp4_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_mp4_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_1080p_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_mp4_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_mp4_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_mp4_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_mp4_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_720p_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_mp4_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_mp4_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_mp4_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_mp4_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_1: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_2: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_3: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
+      video_360p_4: 'https://www.youtube.com/watch?v=IJkYipYNEtI',
       slides:
         'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
     },
diff --git a/src/components/YoutubeRenderer.tsx b/src/components/YoutubeRenderer.tsx
new file mode 100644
index 000000000..b5a8ef79f
--- /dev/null
+++ b/src/components/YoutubeRenderer.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface Props {
+  videoURL: string;
+  width?: string;
+  height?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export const YoutubeRenderer = ({
+  width,
+  height,
+  videoURL,
+  style,
+  className,
+}: Props) => {
+  if (!videoURL) {
+    return <div>No video Available.</div>;
+  }
+
+  return (
+    <iframe
+      width={width || 1280}
+      height={height || 720}
+      src={videoURL}
+      title="YouTube video player"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerPolicy="strict-origin-when-cross-origin"
+      allowFullScreen
+      style={style}
+      className={className || ''}
+    ></iframe>
+  );
+};
+
+export default YoutubeRenderer;
diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx
index d864a5f3a..3d003ccd7 100644
--- a/src/components/admin/ContentRendererClient.tsx
+++ b/src/components/admin/ContentRendererClient.tsx
@@ -5,6 +5,20 @@ import { VideoPlayerSegment } from '@/components/VideoPlayerSegment';
 import VideoContentChapters from '../VideoContentChapters';
 import { useMemo, useState } from 'react';
 import { handleMarkAsCompleted } from '@/lib/utils';
+import YoutubeRenderer from '../YoutubeRenderer';
+
+const isYouTubeUrl = (url: string) => {
+  const youtubePattern: RegExp =
+    /(?:youtu|youtube)(?:\.com|\.be)\/(?:watch\?v=)?([\w-]+)/;
+  return youtubePattern.test(url);
+};
+
+const extractYouTubeIdFromUrl = (url: string) => {
+  const match: RegExpMatchArray | null = url.match(
+    /(?:youtu\.be\/|(?:youtube\.com\/(?:v\/|u\/\w\/|embed\/|watch\?v=)))([\w-]+)/,
+  );
+  return match ? match[1] : null;
+};
 
 export const ContentRendererClient = ({
   metadata,
@@ -63,6 +77,11 @@ export const ContentRendererClient = ({
         src: mpdUrl,
         type: 'application/x-mpegURL',
       };
+    } else if (isYouTubeUrl(mpdUrl)) {
+      return {
+        src: mpdUrl,
+        type: 'video/youtube',
+      };
     }
     return {
       src: mpdUrl,
@@ -89,101 +108,107 @@ export const ContentRendererClient = ({
 
   return (
     <div className="flex gap-2 items-start flex-col lg:flex-row">
-      <div className="flex-1 w-full">
-        <VideoPlayerSegment
-          setQuality={setQuality}
-          contentId={content.id}
-          subtitles={metadata.subtitles}
-          thumbnails={[]}
-          segments={metadata?.segments || []}
-          videoJsOptions={{
-            playbackrates: [0.5, 1, 1.25, 1.5, 1.75, 2],
-            controls: true,
-            fluid: true,
-            html5: {
-              vhs: {
-                overridenative: true,
-              },
-            },
-            thumbnail: metadata.thumbnail || false, // data.isComposite ? data.thumbnails[0] : null,
-            isComposite: true,
-            height: 720,
-            width: 1080,
-            delta: 30,
-            autoplay: true,
-            responsive: true,
-            sources: [source],
-          }}
-          onVideoEnd={() => {
-            setContentCompleted(true);
-          }}
+      {source.type === 'video/youtube' ? (
+        <YoutubeRenderer
+          width="1200"
+          videoURL={`https://www.youtube.com/embed/${extractYouTubeIdFromUrl(source.src)}`}
         />
-        <br />
-        <div className="flex justify-between mb-2">
-          <div>
-            <div className="text-gray-900 dark:text-white font-bold text-2xl">
-              {content.title}
+      ) : (
+        <div className="flex-1 w-full">
+          <VideoPlayerSegment
+            setQuality={setQuality}
+            contentId={content.id}
+            subtitles={metadata.subtitles}
+            thumbnails={[]}
+            segments={metadata?.segments || []}
+            videoJsOptions={{
+              playbackrates: [0.5, 1, 1.25, 1.5, 1.75, 2],
+              controls: true,
+              fluid: true,
+              html5: {
+                vhs: {
+                  overridenative: true,
+                },
+              },
+              thumbnail: metadata.thumbnail || false, // data.isComposite ? data.thumbnails[0] : null,
+              isComposite: true,
+              height: 720,
+              width: 1080,
+              delta: 30,
+              autoplay: true,
+              responsive: true,
+              sources: [source],
+            }}
+            onVideoEnd={() => {
+              setContentCompleted(true);
+            }}
+          />
+          <br />
+          <div className="flex justify-between mb-2">
+            <div>
+              <div className="text-gray-900 dark:text-white font-bold text-2xl">
+                {content.title}
+              </div>
+
+              <button
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 my-4"
+                disabled={loadingMarkAs}
+                onClick={handleMarkCompleted}
+              >
+                {contentCompleted ? 'Mark as Incomplete' : 'Mark as completed'}
+              </button>
             </div>
 
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 my-4"
-              disabled={loadingMarkAs}
-              onClick={handleMarkCompleted}
-            >
-              {contentCompleted ? 'Mark as Incomplete' : 'Mark as completed'}
-            </button>
+            <div>
+              {/* <QualitySelector /> */}
+              <br />
+              {metadata.slides ? (
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row-reverse',
+                    gap: '10px',
+                  }}
+                >
+                  <a href={metadata.slides} target="_blank">
+                    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2">
+                      Slides
+                    </button>
+                  </a>
+                </div>
+              ) : null}
+              {!showChapters && metadata.segments?.length > 0 && (
+                <button
+                  className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2"
+                  onClick={() => {
+                    scrollTo({ top: 0, behavior: 'smooth' });
+                    toggleShowChapters();
+                  }}
+                >
+                  View All Chapters
+                </button>
+              )}
+            </div>
           </div>
-
-          <div>
-            {/* <QualitySelector /> */}
-            <br />
-            {metadata.slides ? (
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'row-reverse',
-                  gap: '10px',
-                }}
-              >
-                <a href={metadata.slides} target="_blank">
-                  <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2">
-                    Slides
-                  </button>
-                </a>
-              </div>
-            ) : null}
-            {!showChapters && metadata.segments?.length > 0 && (
+          {nextContent ? (
+            <div className="flex flex-row-reverse">
               <button
-                className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2"
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-4"
                 onClick={() => {
-                  scrollTo({ top: 0, behavior: 'smooth' });
-                  toggleShowChapters();
+                  const originalPath = window.location.pathname;
+                  const parts = originalPath.split('/');
+                  parts.pop();
+                  parts.push(nextContent.id.toString());
+                  const newPath = parts.join('/');
+                  router.push(newPath);
                 }}
               >
-                View All Chapters
-              </button>
-            )}
-          </div>
+                {nextContent.title}
+              </button>{' '}
+            </div>
+          ) : null}
         </div>
-        {nextContent ? (
-          <div className="flex flex-row-reverse">
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-4"
-              onClick={() => {
-                const originalPath = window.location.pathname;
-                const parts = originalPath.split('/');
-                parts.pop();
-                parts.push(nextContent.id.toString());
-                const newPath = parts.join('/');
-                router.push(newPath);
-              }}
-            >
-              {nextContent.title}
-            </button>{' '}
-          </div>
-        ) : null}
-      </div>
-
+      )}
       {showChapters && (
         <VideoContentChapters
           segments={metadata?.segments}
diff --git a/tsconfig.json b/tsconfig.json
index 4b8fa2e46..e59724b28 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,13 +15,13 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
-      "@/*": ["./src/*"],
-    },
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }