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

@@ -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

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
+  <LiteYouTubeEmbed
-    width="560"
+    // cSpell:ignore Yhyx Sksg
-    height="315"
+    id="Yhyx7otSksg"
-    src="https://www.youtube.com/embed/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"
+    poster="maxresdefault"
-    allowFullScreen
+    webp
   />
 </div>
+```
 
 ## Disclaimer {#disclaimer}
 

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",

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 {
-  .video-container {
+  position: relative;
-    position: relative;
+  overflow: hidden;
-    overflow: hidden;
+  width: 100%;
-    width: 100%;
+  max-width: 560px;
-    max-width: 560px;
+  margin: 0 auto;
-    margin: 0 auto;
+}
-    padding-top: 56.25%;
-  }
 
-  .video-container iframe {
+.yt-lite > .lty-playbtn {
-    position: absolute;
+  cursor: pointer;
-    top: 0;
+  border: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .dropdown-separator {

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
+            <LiteYouTubeEmbed
-              width="560"
+              id="_An9EsKPhp0"
-              height="315"
+              params="autoplay=1&autohide=1&showinfo=0&rel=0"
-              src="https://www.youtube.com/embed/_An9EsKPhp0"
               title="Explain Like I'm 5: Docusaurus"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              poster="maxresdefault"
-              allowFullScreen
+              webp
-              loading="lazy"
             />
           </div>
         </div>

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"