From fa10d1b1a4e18f2fcc088e736b303b8c2d5c4d93 Mon Sep 17 00:00:00 2001
From: Matthias Koch <ithrowexceptions@gmail.com>
Date: Thu, 12 May 2022 04:30:59 +0200
Subject: [PATCH] fix(website): use react-lite-youtube-embed for lazy YouTube
 video (#7390)

* fix(website): use react-lite-youtube-embed for lazy YouTube video

* fix(website): use react-lite-youtube-embed for lazy YouTube video

* fix(website): use react-lite-youtube-embed for lazy YouTube video

* Update multiple-sidebars.md

* Update installation.md

* refactor intro

* rename file back

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 project-words.txt            |  4 ++++
 website/docs/introduction.md | 16 ++++++++++------
 website/package.json         |  1 +
 website/src/css/custom.css   | 28 +++++++++++-----------------
 website/src/pages/index.tsx  | 14 +++++++-------
 yarn.lock                    |  5 +++++
 6 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/project-words.txt b/project-words.txt
index 341e85f935db..2e029e7f7c3f 100644
--- a/project-words.txt
+++ b/project-words.txt
@@ -16,6 +16,7 @@ atrule
 autoconverted
 autogen
 autogenerating
+autohide
 backport
 backticks
 bartosz
@@ -152,6 +153,7 @@ marcey
 marocchino
 massoud
 mathjax
+maxresdefault
 mdast
 mdxa
 mdxast
@@ -208,6 +210,7 @@ philpl
 photoshop
 picocolors
 picomatch
+playbtn
 pluggable
 plushie
 pnpm
@@ -267,6 +270,7 @@ sensical
 serializers
 setaf
 setext
+showinfo
 sida
 simen
 slorber
diff --git a/website/docs/introduction.md b/website/docs/introduction.md
index de877f623891..cec5f22c2e08 100644
--- a/website/docs/introduction.md
+++ b/website/docs/introduction.md
@@ -50,16 +50,20 @@ Or read the **[5-minute tutorial](https://tutorial.docusaurus.io)** online.
 
 In this presentation at [Algolia Community Event](https://www.algolia.com/), [Meta Open Source team](https://opensource.facebook.com/) shared a brief walk-through of Docusaurus. They covered how to get started with the project, enable plugins, and set up functionalities like documentation and blogging.
 
+```mdx-code-block
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
 <div className="video-container">
-  <iframe
-    width="560"
-    height="315"
-    src="https://www.youtube.com/embed/Yhyx7otSksg"
+  <LiteYouTubeEmbed
+    // cSpell:ignore Yhyx Sksg
+    id="Yhyx7otSksg"
+    params="autoplay=1&autohide=1&showinfo=0&rel=0"
     title="Docusaurus: Documentation Made Easy"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowFullScreen
+    poster="maxresdefault"
+    webp
   />
 </div>
+```
 
 ## Disclaimer {#disclaimer}
 
diff --git a/website/package.json b/website/package.json
index 1cd5d07857c6..ee7a44bc87d4 100644
--- a/website/package.json
+++ b/website/package.json
@@ -57,6 +57,7 @@
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-lite-youtube-embed": "^2.2.2",
     "react-medium-image-zoom": "^4.3.7",
     "react-popper": "^2.3.0",
     "rehype-katex": "^6.0.2",
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index dfaf7962951b..24726017096d 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -191,23 +191,17 @@ div[class^='announcementBar_'] {
   content: 'site-custom-css-unique-rule';
 }
 
-@media only screen and (max-width: 996px) {
-  .video-container {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    max-width: 560px;
-    margin: 0 auto;
-    padding-top: 56.25%;
-  }
-
-  .video-container iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+.video-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.yt-lite > .lty-playbtn {
+  cursor: pointer;
+  border: 0;
 }
 
 .dropdown-separator {
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 86de91b0118a..d2ccfc69aaca 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -18,6 +18,8 @@ import Tweet from '@site/src/components/Tweet';
 import Tweets, {type TweetItem} from '@site/src/data/tweets';
 import Quotes from '@site/src/data/quotes';
 import Features, {type FeatureItem} from '@site/src/data/features';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 import clsx from 'clsx';
 
@@ -162,14 +164,12 @@ function VideoContainer() {
             <Translate>Check it out in the intro video</Translate>
           </h2>
           <div className="video-container">
-            <iframe
-              width="560"
-              height="315"
-              src="https://www.youtube.com/embed/_An9EsKPhp0"
+            <LiteYouTubeEmbed
+              id="_An9EsKPhp0"
+              params="autoplay=1&autohide=1&showinfo=0&rel=0"
               title="Explain Like I'm 5: Docusaurus"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-              loading="lazy"
+              poster="maxresdefault"
+              webp
             />
           </div>
         </div>
diff --git a/yarn.lock b/yarn.lock
index fd39a5579993..5374e67cd0de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12522,6 +12522,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.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.2.2.tgz#d61fce061ef730ac74072b82eb910021b8a9a7d1"
+  integrity sha512-1NqbNDcunRcB/9G9upXM59jyLdEUXy3Xk/XJ+JdIdT04qNTj5Xi8enR1BzMdowLsrDv8yW5qge2ob3gb22Qfnw==
+
 react-live@2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/react-live/-/react-live-2.2.3.tgz#260f99194213799f0005e473e7a4154c699d6a7c"