From afefc34a85a65c3cd80924742eaecebb64600bf9 Mon Sep 17 00:00:00 2001
From: Simen Bekkhus <sbekkhus91@gmail.com>
Date: Thu, 7 Apr 2022 12:09:19 +0200
Subject: [PATCH 1/2] chore(website): use lite embed instead of iframe for
 YouTube videos

---
 docs/Architecture.md                          |  21 +--
 website/package.json                          |   1 +
 website/src/pages/index.js                    |  20 +--
 website/src/pages/videos.js                   | 127 ------------------
 website/static/css/custom.css                 |   2 +-
 .../version-25.x/Architecture.md              |  21 +--
 .../version-26.x/Architecture.md              |  21 +--
 .../version-27.0/Architecture.md              |  21 +--
 .../version-27.1/Architecture.md              |  21 +--
 .../version-27.2/Architecture.md              |  21 +--
 .../version-27.4/Architecture.md              |  21 +--
 .../version-27.5/Architecture.md              |  21 +--
 yarn.lock                                     |  11 ++
 13 files changed, 57 insertions(+), 272 deletions(-)
 delete mode 100644 website/src/pages/videos.js

diff --git a/docs/Architecture.md b/docs/Architecture.md
index 300abd75d9f0..3b89b25032f5 100644
--- a/docs/Architecture.md
+++ b/docs/Architecture.md
@@ -3,26 +3,15 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
 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/package.json b/website/package.json
index 0021728e996f..6a4bab45207b 100644
--- 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
index 0ab8788f28fb..6fce9e34606c 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -11,6 +11,8 @@ 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 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 import {setupLandingAnimation} from '@site/src/pages/animations/_landingAnimation';
 
@@ -512,14 +514,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 +545,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
deleted file mode 100644
index 72d0dd9a8ecf..000000000000
--- a/website/src/pages/videos.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import Layout from '@theme/Layout';
-
-import Translate from '@docusaurus/Translate';
-
-// TODO legacy Docusaurus v1 components
-import Container from '@site/src/components/v1/Container';
-import MarkdownBlock from '@site/src/components/v1/MarkdownBlock';
-
-import VideosJSON from '@site/videos.json';
-import styles from './videos.module.css';
-
-const VideoTypes = {
-  YOUTUBE: 'youtube',
-  IFRAME: 'iframe',
-};
-
-class Video extends React.PureComponent {
-  render() {
-    const {url, type} = this.props;
-    switch (type) {
-      case VideoTypes.YOUTUBE: {
-        return (
-          <iframe
-            width="560"
-            height="315"
-            src={url}
-            frameBorder="0"
-            allowFullScreen
-          />
-        );
-      }
-      case VideoTypes.IFRAME: {
-        return <iframe src={url} />;
-      }
-      default: {
-        return <iframe src={url} />;
-      }
-    }
-  }
-}
-
-class Videos extends React.Component {
-  render() {
-    const showcase = VideosJSON.videos.map(
-      ({title, description, type, url}, index) => {
-        const textMarkup = (
-          <div className="blockContent padding-horiz--lg">
-            <h2>
-              <a href={url}>{title}</a>
-            </h2>
-            <div>
-              <MarkdownBlock>{description}</MarkdownBlock>
-            </div>
-          </div>
-        );
-        const videoMarkup = (
-          <div className="video">
-            <Video url={url} type={type} />
-          </div>
-        );
-
-        return (
-          <Container key={url} padding={['bottom', 'top']}>
-            <a className="hash-link" href={`#${title}`} />
-            {index % 2 === 0 ? (
-              <div className="blockElement imageAlignSide threeByGridBlock">
-                {videoMarkup}
-                {textMarkup}
-              </div>
-            ) : (
-              <div className="blockElement imageAlignSide threeByGridBlock">
-                {textMarkup}
-                {videoMarkup}
-              </div>
-            )}
-          </Container>
-        );
-      }
-    );
-
-    return (
-      <div className="mainContainerV1">
-        <Container padding={['bottom', 'top']}>
-          <div className={styles.showcaseSection}>
-            <div className={styles.prose}>
-              <h1>
-                <Translate>Talks & Videos</Translate>
-              </h1>
-              <p>
-                <Translate>
-                  We understand that reading through docs can be boring
-                  sometimes. Here is a community curated list of talks & videos
-                  around Jest.
-                </Translate>
-              </p>
-            </div>
-          </div>
-          {showcase}
-          <div style={{textAlign: 'center'}}>
-            <a
-              href={VideosJSON.editUrl}
-              className="button button--primary button--outline"
-            >
-              <Translate>Add your favorite talk</Translate>
-            </a>
-          </div>
-        </Container>
-      </div>
-    );
-  }
-}
-
-export default function VideosPage(props) {
-  return (
-    <Layout>
-      <Videos {...props} />
-    </Layout>
-  );
-}
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index eb50deecf550..0b9e8f75d2cd 100644
--- 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
index 300abd75d9f0..3b89b25032f5 100644
--- a/website/versioned_docs/version-25.x/Architecture.md
+++ b/website/versioned_docs/version-25.x/Architecture.md
@@ -3,26 +3,15 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
 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
index 300abd75d9f0..3b89b25032f5 100644
--- a/website/versioned_docs/version-26.x/Architecture.md
+++ b/website/versioned_docs/version-26.x/Architecture.md
@@ -3,26 +3,15 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
 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
index 300abd75d9f0..3b89b25032f5 100644
--- a/website/versioned_docs/version-27.0/Architecture.md
+++ b/website/versioned_docs/version-27.0/Architecture.md
@@ -3,26 +3,15 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
 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
index 300abd75d9f0..3b89b25032f5 100644
--- a/website/versioned_docs/version-27.1/Architecture.md
+++ b/website/versioned_docs/version-27.1/Architecture.md
@@ -3,26 +3,15 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
 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
index 300abd75d9f0..3b89b25032f5 100644
--- a/website/versioned_docs/version-27.2/Architecture.md
+++ b/website/versioned_docs/version-27.2/Architecture.md
@@ -3,26 +3,15 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
 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.4/Architecture.md b/website/versioned_docs/version-27.4/Architecture.md
index 300abd75d9f0..3b89b25032f5 100644
--- a/website/versioned_docs/version-27.4/Architecture.md
+++ b/website/versioned_docs/version-27.4/Architecture.md
@@ -3,26 +3,15 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
 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.5/Architecture.md b/website/versioned_docs/version-27.5/Architecture.md
index 300abd75d9f0..3b89b25032f5 100644
--- a/website/versioned_docs/version-27.5/Architecture.md
+++ b/website/versioned_docs/version-27.5/Architecture.md
@@ -3,26 +3,15 @@ id: architecture
 title: Architecture
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
 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/yarn.lock b/yarn.lock
index a26e933d6633..7e1c7a58f9a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13804,6 +13804,7 @@ __metadata:
     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
   languageName: unknown
   linkType: soft
@@ -18557,6 +18558,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-lite-youtube-embed@npm:^2.2.1-a":
+  version: 2.2.1
+  resolution: "react-lite-youtube-embed@npm:2.2.1"
+  peerDependencies:
+    react: ">=16.0.8"
+    react-dom: ">=16.0.8"
+  checksum: f3be7bcaa6ec5ca5a7e35a941a7e6d555ac465486807240992ef3389d29631bcc7f85e37a3199ee1dd7ce47ac21440987f113694dcb73ad9be0b3d1e02cfabf9
+  languageName: node
+  linkType: hard
+
 "react-loadable-ssr-addon-v5-slorber@npm:^1.0.1":
   version: 1.0.1
   resolution: "react-loadable-ssr-addon-v5-slorber@npm:1.0.1"

From a43e1d71e053c25b655bd770fc7227e6c51e169c Mon Sep 17 00:00:00 2001
From: Simen Bekkhus <sbekkhus91@gmail.com>
Date: Thu, 7 Apr 2022 12:21:25 +0200
Subject: [PATCH 2/2] css in config instead

---
 docs/Architecture.md                                | 1 -
 website/docusaurus.config.js                        | 3 +++
 website/src/pages/index.js                          | 1 -
 website/versioned_docs/version-25.x/Architecture.md | 1 -
 website/versioned_docs/version-26.x/Architecture.md | 1 -
 website/versioned_docs/version-27.0/Architecture.md | 1 -
 website/versioned_docs/version-27.1/Architecture.md | 1 -
 website/versioned_docs/version-27.2/Architecture.md | 1 -
 website/versioned_docs/version-27.4/Architecture.md | 1 -
 website/versioned_docs/version-27.5/Architecture.md | 1 -
 10 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/docs/Architecture.md b/docs/Architecture.md
index 3b89b25032f5..8d9a7c1d5eba 100644
--- a/docs/Architecture.md
+++ b/docs/Architecture.md
@@ -4,7 +4,6 @@ title: Architecture
 ---
 
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 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:
 
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 00cf5cc76d72..8d57541950c8 100644
--- 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/src/pages/index.js b/website/src/pages/index.js
index 6fce9e34606c..ac555ee4b141 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -12,7 +12,6 @@ import Link from '@docusaurus/Link';
 import backers from '@site/backers.json';
 import Translate from '@docusaurus/Translate';
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 import {setupLandingAnimation} from '@site/src/pages/animations/_landingAnimation';
 
diff --git a/website/versioned_docs/version-25.x/Architecture.md b/website/versioned_docs/version-25.x/Architecture.md
index 3b89b25032f5..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-25.x/Architecture.md
+++ b/website/versioned_docs/version-25.x/Architecture.md
@@ -4,7 +4,6 @@ title: Architecture
 ---
 
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 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:
 
diff --git a/website/versioned_docs/version-26.x/Architecture.md b/website/versioned_docs/version-26.x/Architecture.md
index 3b89b25032f5..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-26.x/Architecture.md
+++ b/website/versioned_docs/version-26.x/Architecture.md
@@ -4,7 +4,6 @@ title: Architecture
 ---
 
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 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:
 
diff --git a/website/versioned_docs/version-27.0/Architecture.md b/website/versioned_docs/version-27.0/Architecture.md
index 3b89b25032f5..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.0/Architecture.md
+++ b/website/versioned_docs/version-27.0/Architecture.md
@@ -4,7 +4,6 @@ title: Architecture
 ---
 
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 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:
 
diff --git a/website/versioned_docs/version-27.1/Architecture.md b/website/versioned_docs/version-27.1/Architecture.md
index 3b89b25032f5..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.1/Architecture.md
+++ b/website/versioned_docs/version-27.1/Architecture.md
@@ -4,7 +4,6 @@ title: Architecture
 ---
 
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 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:
 
diff --git a/website/versioned_docs/version-27.2/Architecture.md b/website/versioned_docs/version-27.2/Architecture.md
index 3b89b25032f5..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.2/Architecture.md
+++ b/website/versioned_docs/version-27.2/Architecture.md
@@ -4,7 +4,6 @@ title: Architecture
 ---
 
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 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:
 
diff --git a/website/versioned_docs/version-27.4/Architecture.md b/website/versioned_docs/version-27.4/Architecture.md
index 3b89b25032f5..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.4/Architecture.md
+++ b/website/versioned_docs/version-27.4/Architecture.md
@@ -4,7 +4,6 @@ title: Architecture
 ---
 
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 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:
 
diff --git a/website/versioned_docs/version-27.5/Architecture.md b/website/versioned_docs/version-27.5/Architecture.md
index 3b89b25032f5..8d9a7c1d5eba 100644
--- a/website/versioned_docs/version-27.5/Architecture.md
+++ b/website/versioned_docs/version-27.5/Architecture.md
@@ -4,7 +4,6 @@ title: Architecture
 ---
 
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 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: