Make youtube embeds lighter

And possibly more privacy-enhanced

package-lock.json

@@ -11,6 +11,7 @@
         "@formatjs/intl-localematcher": "~0.2.32",
         "@github/text-expander-element": "~2.3.0",
         "@iconify-icons/mingcute": "~1.2.4",
+        "@justinribeiro/lite-youtube": "~1.5.0",
         "@szhsin/react-menu": "~3.5.2",
         "dayjs": "~1.11.7",
         "dayjs-twitter": "~0.5.0",
@@ -2620,6 +2621,11 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
+    "node_modules/@justinribeiro/lite-youtube": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@justinribeiro/lite-youtube/-/lite-youtube-1.5.0.tgz",
+      "integrity": "sha512-TU92RKtz9BI9PRYrVwDIUsnFadLZtqRKWl1ZOdbxb7roJDb8Dd/xURllAsLEmCg6oJNyhXlVa5RsnUc0EKd8Cw=="
+    },
     "node_modules/@lukeed/csprng": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@lukeed/csprng/-/csprng-1.0.1.tgz",
@@ -8816,6 +8822,11 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
+    "@justinribeiro/lite-youtube": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@justinribeiro/lite-youtube/-/lite-youtube-1.5.0.tgz",
+      "integrity": "sha512-TU92RKtz9BI9PRYrVwDIUsnFadLZtqRKWl1ZOdbxb7roJDb8Dd/xURllAsLEmCg6oJNyhXlVa5RsnUc0EKd8Cw=="
+    },
     "@lukeed/csprng": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@lukeed/csprng/-/csprng-1.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "@formatjs/intl-localematcher": "~0.2.32",
     "@github/text-expander-element": "~2.3.0",
     "@iconify-icons/mingcute": "~1.2.4",
+    "@justinribeiro/lite-youtube": "~1.5.0",
     "@szhsin/react-menu": "~3.5.2",
     "dayjs": "~1.11.7",
     "dayjs-twitter": "~0.5.0",

src/components/status.jsx

@@ -1,5 +1,6 @@
 import './status.css';
 
+import '@justinribeiro/lite-youtube';
 import {
   ControlledMenu,
   Menu,
@@ -1195,6 +1196,13 @@ function Card({ card, instance }) {
       </a>
     );
   } else if (type === 'video') {
+    if (/youtube/i.test(providerName)) {
+      // Get ID from e.g. https://www.youtube.com/watch?v=[VIDEO_ID]
+      const videoID = url.match(/watch\?v=([^&]+)/)?.[1];
+      if (videoID) {
+        return <lite-youtube videoid={videoID} nocookie></lite-youtube>;
+      }
+    }
     return (
       <div
         class="card video"