Added styles for s,l,m embed sizes

kausaltech · Sep 27, 2023 · 4dc555e · 4dc555e
1 parent 259510e
commit 4dc555e
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/components/common/StreamField.tsx b/components/common/StreamField.tsx
@@ -277,10 +277,31 @@ const STREAM_FIELD_FRAGMENT = gql`
 `;
 
 const ResponsiveStyles = styled.div`
+  .responsive-object {
+    width: 100%;
+    text-align: center;
+  }
+
   .responsive-object iframe,
   .responsive-object object,
   .responsive-object embed {
     width: 100%;
+    height: 100%;
+  }
+
+  .responsive-object-small iframe {
+    aspect-ratio: 16 / 9;
+    max-width: 300px;
+  }
+
+  .responsive-object-medium iframe {
+    aspect-ratio: 16 / 9;
+    max-width: 480px;
+  }
+
+  .responsive-object-large iframe {
+    aspect-ratio: 16 / 9;
+    max-width: 960px;
   }
 `;