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

@@ -5,4 +5,5 @@ export interface YouTubeProps {
   end?: string;
   height?: string;
   width?: string;
+  url?: string;
 }

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>
   );

markdoc/tags/youtube.markdoc.ts

@@ -20,5 +20,8 @@ export const youtube = {
     width: {
       type: Boolean,
     },
+    url: {
+      type: String,
+    },
   },
 };