Merge pull request #11740 from ethereum/youtube-lite-embed

Implement privacy-preserving react-lite-youtube-embed

Author: corwintines

package.json

@@ -69,6 +69,7 @@
     "react-i18next": "^12.1.4",
     "react-icons": "^4.3.1",
     "react-instantsearch-dom": "^6.32.0",
+    "react-lite-youtube-embed": "^2.4.0",
     "react-select": "^4.3.0",
     "recharts": "^2.1.9",
     "styled-system": "^5.1.5",

src/components/YouTube.tsx

@@ -1,5 +1,7 @@
 import React from "react"
-import { AspectRatio } from "@chakra-ui/react"
+import { Box } from "@chakra-ui/react"
+import LiteYouTubeEmbed from "react-lite-youtube-embed"
+import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css"
 
 /**
  * @param {id} ID of the YouTube video
@@ -11,32 +13,26 @@ import { AspectRatio } from "@chakra-ui/react"
  * @returns Embedded YouTube video component
  */
 
-export interface IProps {
+type YouTubeProps = {
   id: string
   start?: string
   title?: string
 }
 
-const YouTube: React.FC<IProps> = ({ id, start = "0", title = "YouTube" }) => {
-  const startQuery = parseInt(start) > 0 ? `?start=${start}` : ""
-  const baseUrl = "https://www.youtube.com/embed/"
-  const src = baseUrl + id + startQuery
+const YouTube = ({ id, start = "0", title = "YouTube" }: YouTubeProps) => {
+  const params = new URLSearchParams()
+  ;+start > 0 && params.set("start", start)
   return (
-    <AspectRatio as="figure" maxW="560px" ratio={16 / 9} my={8}>
-      <iframe
-        src={src}
-        frameBorder="0"
+    <Box as="figure" maxW={560} my={8}>
+      <LiteYouTubeEmbed
+        aspectHeight={9}
+        aspectWidth={16}
+        id={id}
         title={title}
-        allow="
-      accelerometer;
-      autoplay;
-      clipboard-write;
-      encrypted-media;
-      gyroscope;
-      picture-in-picture"
-        allowFullScreen
+        params={params.toString()}
+        noCookie
       />
-    </AspectRatio>
+    </Box>
   )
 }
 

yarn.lock

@@ -15634,6 +15634,11 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-lite-youtube-embed@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.4.0.tgz#1f56a12be1061d50431444d52d836bd09a1283a2"
+  integrity sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ==
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"