From 57e6eb7638ea9a0c4873876683e3c0529c1e0119 Mon Sep 17 00:00:00 2001
From: Aniket Katkar <aniketkatkar97@gmail.com>
Date: Wed, 4 Dec 2024 17:10:56 +0530
Subject: [PATCH] Youtube tag improvements to now render videos from custom
 URLs (#343)

* Youtube tag can now be used for rendering embedded videos from other custom urls

* change test content

* fix the youtube url use code
---
 components/common/Youtube/Youtube.interface.ts |  1 +
 components/common/Youtube/Youtube.tsx          | 10 +++++++---
 markdoc/tags/youtube.markdoc.ts                |  3 +++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/common/Youtube/Youtube.interface.ts b/components/common/Youtube/Youtube.interface.ts
index 4ee6d5965..f1a68e1e0 100644
--- a/components/common/Youtube/Youtube.interface.ts
+++ b/components/common/Youtube/Youtube.interface.ts
@@ -5,4 +5,5 @@ export interface YouTubeProps {
   end?: string;
   height?: string;
   width?: string;
+  url?: string;
 }
diff --git a/components/common/Youtube/Youtube.tsx b/components/common/Youtube/Youtube.tsx
index 1dc8df79d..53f785cbc 100644
--- a/components/common/Youtube/Youtube.tsx
+++ b/components/common/Youtube/Youtube.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import {YouTubeProps} from "./Youtube.interface";
+import { YouTubeProps } from "./Youtube.interface";
 import styles from "./Youtube.module.css";
 
 const YouTube = ({
@@ -9,18 +9,22 @@ const YouTube = ({
   end = "",
   height,
   width,
+  url = "",
 }: YouTubeProps) => {
   return (
     <div className={classNames(styles.Container, className)}>
       <iframe
         loading="lazy"
         allowFullScreen
-        src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&start=${start}&end=${end}&rel=0`}
+        src={
+          url ||
+          `https://www.youtube-nocookie.com/embed/${videoId}?rel=0&start=${start}&end=${end}&rel=0`
+        }
         className={styles.Iframe}
         title="YouTube video player"
         frameBorder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        style={{height, width}}
+        style={{ height, width }}
       ></iframe>
     </div>
   );
diff --git a/markdoc/tags/youtube.markdoc.ts b/markdoc/tags/youtube.markdoc.ts
index 9b5ba57de..0212ff03d 100644
--- a/markdoc/tags/youtube.markdoc.ts
+++ b/markdoc/tags/youtube.markdoc.ts
@@ -20,5 +20,8 @@ export const youtube = {
     width: {
       type: Boolean,
     },
+    url: {
+      type: String,
+    },
   },
 };