docs(website): fix video responsiveness (#6709)

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}

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%;
+  }
+}

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"

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%;
-  }
-}