video iframe updates

ahmad-masud · Nov 11, 2024 · 138607a · 138607a
1 parent df26d3e
commit 138607a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/src/components/solution.js b/src/components/solution.js
@@ -103,13 +103,15 @@ const Solution = ({ problemId, onClose, theme }) => {
         </button>
 
         {videoUrl && (
-          <iframe
-            src={`https://www.youtube.com/embed/${videoUrl}`}
-            title="YouTube video player"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-            className="video-iframe"
-          ></iframe>
+          <div className="video-container">
+            <iframe
+              src={`https://www.youtube.com/embed/${videoUrl}`}
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              className="video-iframe"
+            ></iframe>
+          </div>
         )}
 
         <div className="solutions-container">

diff --git a/src/styles/solution.css b/src/styles/solution.css
@@ -24,11 +24,22 @@
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-.video-iframe{
-    width: 100%;
-    height: 600px;
-    margin-top: 40px;
-    border: none;
+.video-container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+  height: 0;
+  margin-top: 40px;
+  overflow: hidden;
+}
+
+.video-iframe {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border: none;
 }
 
 .copy-button {