chore(website): use lite embed instead of iframe for YouTube videos (#…

…12643)
jestjs · Apr 7, 2022 · c12d444 · c12d444
1 parent 550c92f
commit c12d444
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 272 deletions.
diff --git a/docs/Architecture.md b/docs/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
 If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/3YDiloj8_d0"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="3YDiloj8_d0" />
 
 If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/B8FbUK0WpVU"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="B8FbUK0WpVU" />
 
 There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -69,6 +69,9 @@ module.exports = {
             path.resolve('src/components/v1/legacyCSS.css'),
             path.resolve('static/css/custom.css'),
             path.resolve('static/css/jest.css'),
+            require.resolve(
+              'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+            ),
           ],
         },
         gtag: {

diff --git a/website/package.json b/website/package.json
@@ -39,6 +39,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-github-btn": "^1.2.0",
+    "react-lite-youtube-embed": "^2.2.1-a",
     "react-markdown": "^8.0.0"
   },
   "devDependencies": {

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -11,6 +11,7 @@ import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import backers from '@site/backers.json';
 import Translate from '@docusaurus/Translate';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
 
 import {setupLandingAnimation} from '@site/src/pages/animations/_landingAnimation';
 
@@ -512,14 +513,7 @@ class Index extends React.Component {
             <div className="blockElement imageAlignSide gridBlock video-block">
               <div className="blockContent ">
                 <div className="video">
-                  <iframe
-                    width="560"
-                    height="315"
-                    src="https://www.youtube.com/embed/cAKYQpTC7MA"
-                    frameBorder="0"
-                    allow="autoplay; encrypted-media"
-                    allowFullScreen
-                  />
+                  <LiteYouTubeEmbed id="cAKYQpTC7MA" />
                 </div>
               </div>
             </div>
@@ -550,14 +544,7 @@ class Index extends React.Component {
             <div className="blockElement imageAlignSide gridBlock video-block">
               <div className="blockContent ">
                 <div className="video">
-                  <iframe
-                    width="560"
-                    height="315"
-                    src="https://www.youtube.com/embed/SyHzgcFefBk"
-                    frameBorder="0"
-                    allow="autoplay; encrypted-media"
-                    allowFullScreen
-                  />
+                  <LiteYouTubeEmbed id="SyHzgcFefBk" />
                 </div>
               </div>
             </div>

diff --git a/website/src/pages/videos.js b/website/src/pages/videos.js
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
@@ -43,7 +43,7 @@ div.bottom-margin {
 
 .blockContent div.video {
   width: 100%;
-  height: 280px;
+  height: 350px;
   margin-top: 20px;
   padding-right: 80px;
 }

diff --git a/website/versioned_docs/version-25.x/Architecture.md b/website/versioned_docs/version-25.x/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
 If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/3YDiloj8_d0"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="3YDiloj8_d0" />
 
 If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/B8FbUK0WpVU"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="B8FbUK0WpVU" />
 
 There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-26.x/Architecture.md b/website/versioned_docs/version-26.x/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
 If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/3YDiloj8_d0"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="3YDiloj8_d0" />
 
 If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/B8FbUK0WpVU"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="B8FbUK0WpVU" />
 
 There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-27.0/Architecture.md b/website/versioned_docs/version-27.0/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
 If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/3YDiloj8_d0"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="3YDiloj8_d0" />
 
 If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/B8FbUK0WpVU"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="B8FbUK0WpVU" />
 
 There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-27.1/Architecture.md b/website/versioned_docs/version-27.1/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
 If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/3YDiloj8_d0"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="3YDiloj8_d0" />
 
 If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/B8FbUK0WpVU"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="B8FbUK0WpVU" />
 
 There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-27.2/Architecture.md b/website/versioned_docs/version-27.2/Architecture.md
@@ -3,26 +3,14 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+
 If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/3YDiloj8_d0"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="3YDiloj8_d0" />
 
 If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/B8FbUK0WpVU"
-  frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen
-></iframe>
+<LiteYouTubeEmbed id="B8FbUK0WpVU" />
 
 There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.