From 0f1f35b67854642c2c53318b82f5ba5ed65a71f2 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 17 Feb 2022 16:22:36 +0300
Subject: [PATCH] docs(website): fix video responsiveness (#6709)

---
 website/docs/introduction.md        | 22 ++++++++++------------
 website/src/css/custom.css          | 19 +++++++++++++++++++
 website/src/pages/index.tsx         |  2 +-
 website/src/pages/styles.module.css | 19 -------------------
 4 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/website/docs/introduction.md b/website/docs/introduction.md
index 9537b7c92c..36c26cfe15 100644
--- a/website/docs/introduction.md
+++ b/website/docs/introduction.md
@@ -50,18 +50,16 @@ 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.
 
-<div className="col">
-  <div>
-    <iframe
-      width="560"
-      height="315"
-      src="https://www.youtube.com/embed/Yhyx7otSksg"
-      title="Docusaurus: Documentation Made Easy"
-      frameBorder="0"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-      allowFullScreen
-    />
-  </div>
+<div className="video-container">
+  <iframe
+    width="560"
+    height="315"
+    src="https://www.youtube.com/embed/Yhyx7otSksg"
+    title="Docusaurus: Documentation Made Easy"
+    frameBorder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen
+  />
 </div>
 
 ## Disclaimer {#disclaimer}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index b882c53fb2..8c774d3fb1 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -192,3 +192,22 @@ div[class^='announcementBar_'] {
 .test-marker-site-custom-css-unique-rule {
   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%;
+  }
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index c8ba8e9f31..62962e8809 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -162,7 +162,7 @@ function VideoContainer() {
           <h2>
             <Translate>Check it out in the intro video</Translate>
           </h2>
-          <div className={styles.ytVideo}>
+          <div className="video-container">
             <iframe
               width="560"
               height="315"
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index d4e59fc342..ed8fa1fcb0 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -179,22 +179,3 @@
 .test-marker-site-index-page {
   content: 'site-index-page';
 }
-
-@media only screen and (max-width: 996px) {
-  .ytVideo {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    max-width: 560px;
-    margin: 0 auto;
-    padding-top: 56.25%;
-  }
-
-  .ytVideo iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}