Merge pull request #776 from maykinmedia/feature/1714-styling-video-h…

…omepage [#1756] Make video iFrames responsive
maykinmedia · Sep 22, 2023 · ac5a902 · ac5a902
2 parents c96b85f + 8a270b6
commit ac5a902
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/open_inwoner/scss/components/Video/Video.scss b/src/open_inwoner/scss/components/Video/Video.scss
@@ -1,12 +1,25 @@
 .video {
+  margin: var(--spacing-large) 0;
+  max-width: var(--mobile-s-width);
+
   &__container {
   }
 
   &__player {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%; /* 16:9 Aspect Ratio for modern videos (divide 9 by 16 = 0.5625) */
   }
 
   &__iframe {
-    border-width: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
   }
 
   &--full-width {