youtube video support

package-lock.json

@@ -22,6 +22,7 @@
         "react-leaflet-cluster": "^2.1.0",
         "react-markdown": "^9.0.1",
         "react-router-dom": "^6.16.0",
+        "react-string-replace": "^1.1.1",
         "react-toastify": "^9.1.3",
         "rehype-video": "^2.0.2",
         "tributejs": "^5.1.3",
@@ -4890,6 +4891,14 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-string-replace": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.1.tgz",
+      "integrity": "sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "9.1.3",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",

package.json

@@ -55,6 +55,7 @@
     "react-leaflet-cluster": "^2.1.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.16.0",
+    "react-string-replace": "^1.1.1",
     "react-toastify": "^9.1.3",
     "rehype-video": "^2.0.2",
     "tributejs": "^5.1.3",

src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx

@@ -35,6 +35,7 @@ replacedText = replacedText.replace(hashTagRegex, (match) => {
   })
 
 
+
   const CustomH1 = ({ children }) => (
     <h1 className="tw-text-xl tw-font-bold">{children}</h1>
   );
@@ -91,12 +92,32 @@ const CustomHashTagLink = ({ children, tag, item }) => (
       }}>{children}</a>
   );
 
+  const isSpecialYouTubeLink = (url) => {
+    return /(?<=!\()[^)]+(?=\))/g.test(url);
+  };
+
 
   return (
     //@ts-ignore
     <Markdown rehypePlugins={[rehypeVideo]} components={{
       p: CustomParagraph,
       a: ({ href, children }) => {
+        // Prüft, ob der Link ein YouTube-Video ist
+        const isYouTubeVideo = href?.startsWith('https://www.youtube.com/watch?v=');
+
+        if (isYouTubeVideo) {
+          const videoId = href?.split('v=')[1].split('&')[0]; // Extrahiert die Video-ID aus der URL
+          const youtubeEmbedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
+
+          return (
+
+              <iframe className='tw-w-full'
+                src={youtubeEmbedUrl}
+                allowFullScreen
+              />
+
+          );
+        }
         if (href?.startsWith("#")) {
           const tag = tags.find(t => t.id.toLowerCase() == href.slice(1).toLowerCase())
           return <CustomHashTagLink tag={tag} item={item}>{children}</CustomHashTagLink>;