Bugfix: Prevent Embedded Video Clipping in Safari (#1957)

This PR addresses a bug where iframe video players like YouTube or Vimeo used in an Embed object would offset to the left when playing in Safari, resulting in the left side of the player being cut off. Fixes #828
cloudfour · Jul 15, 2022 · 1c7f142 · 1c7f142
1 parent f284b33
commit 1c7f142
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/fuzzy-stingrays-begin.md b/.changeset/fuzzy-stingrays-begin.md
@@ -0,0 +1,5 @@
+---
+"@cloudfour/patterns": patch
+---
+
+Bugfix: Prevent Embed videos from clipping in Safari
diff --git a/src/mixins/_ratio-box.scss b/src/mixins/_ratio-box.scss
@@ -39,9 +39,13 @@ $aspect-ratio-map: meta.module-variables('aspect-ratio');
     inline-size: 100%;
     inset-block-start: 0;
     inset-inline-start: 0;
+    position: absolute;
+  }
+
+  > img,
+  > picture > img {
     object-fit: cover;
     object-position: center;
-    position: absolute;
   }
 }