From e9621a1f509b74c6801bb02bb8307fba9f317f4c Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 12 Mar 2026 12:06:34 +1100
Subject: [PATCH] fix(skin): fix fullscreen video clipping and border-radius
 handling (#905)

---
 .../skins/src/default/css/components/media.css | 18 ++++++++++++++++++
 .../skins/src/default/css/components/root.css  |  4 ----
 packages/skins/src/default/css/video.css       |  4 ++++
 .../src/default/tailwind/components/root.ts    |  4 +---
 .../src/default/tailwind/video.tailwind.ts     |  7 ++++++-
 .../skins/src/minimal/css/components/media.css | 18 ++++++++++++++++++
 .../skins/src/minimal/css/components/root.css  |  4 ----
 packages/skins/src/minimal/css/video.css       | 13 +++++++------
 .../src/minimal/tailwind/video.tailwind.ts     |  7 ++++++-
 9 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/packages/skins/src/default/css/components/media.css b/packages/skins/src/default/css/components/media.css
index ddf5c03f..a42f4e3d 100644
--- a/packages/skins/src/default/css/components/media.css
+++ b/packages/skins/src/default/css/components/media.css
@@ -7,8 +7,13 @@
   display: block;
   width: 100%;
   height: 100%;
+}
+.media-default-skin ::slotted(video) {
   border-radius: var(--media-border-radius, 2rem);
 }
+.media-default-skin video {
+  border-radius: inherit;
+}
 
 /* ==========================================================================
    Poster Image
@@ -28,3 +33,16 @@
     opacity: 0;
   }
 }
+
+/* ==========================================================================
+   Fullscreen
+   ========================================================================== */
+
+.media-default-skin:fullscreen video,
+.media-default-skin:fullscreen ::slotted(video),
+.media-default-skin > img {
+  object-fit: contain;
+}
+.media-default-skin:fullscreen ::slotted(video) {
+  border-radius: 0;
+}
diff --git a/packages/skins/src/default/css/components/root.css b/packages/skins/src/default/css/components/root.css
index 05b22cd1..1d81f526 100644
--- a/packages/skins/src/default/css/components/root.css
+++ b/packages/skins/src/default/css/components/root.css
@@ -21,8 +21,4 @@
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-
-  &:fullscreen {
-    border-radius: 0;
-  }
 }
diff --git a/packages/skins/src/default/css/video.css b/packages/skins/src/default/css/video.css
index 23d5a4be..174750a3 100644
--- a/packages/skins/src/default/css/video.css
+++ b/packages/skins/src/default/css/video.css
@@ -42,6 +42,10 @@
     box-shadow: inset 0 0 0 1px var(--media-border-color);
     pointer-events: none;
   }
+
+  &:fullscreen {
+    border-radius: 0;
+  }
 }
 
 /* ==========================================================================
diff --git a/packages/skins/src/default/tailwind/components/root.ts b/packages/skins/src/default/tailwind/components/root.ts
index e8ccb294..1d8bc58c 100644
--- a/packages/skins/src/default/tailwind/components/root.ts
+++ b/packages/skins/src/default/tailwind/components/root.ts
@@ -9,7 +9,5 @@ export const root = cn(
   // Resets
   '**:box-border **:m-0',
   '[&_button]:font-[inherit]',
-  'motion-safe:[interpolate-size:allow-keywords]',
-  // Fullscreen
-  '[&:fullscreen]:rounded-none'
+  'motion-safe:[interpolate-size:allow-keywords]'
 );
diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts
index a37f54a9..51df0f4a 100644
--- a/packages/skins/src/default/tailwind/video.tailwind.ts
+++ b/packages/skins/src/default/tailwind/video.tailwind.ts
@@ -49,7 +49,12 @@ export const root = (isShadowDOM: boolean) =>
         ]
       : [],
     // Fullscreen
-    '[&:fullscreen]:rounded-none'
+    '[&:fullscreen]:rounded-none',
+    {
+      '[&:fullscreen_video]:object-contain': !isShadowDOM,
+      '[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none': isShadowDOM,
+    },
+    '[&:fullscreen>img]:object-contain'
   );
 
 /* ==========================================================================
diff --git a/packages/skins/src/minimal/css/components/media.css b/packages/skins/src/minimal/css/components/media.css
index d3c7c9ea..4d30b586 100644
--- a/packages/skins/src/minimal/css/components/media.css
+++ b/packages/skins/src/minimal/css/components/media.css
@@ -7,8 +7,13 @@
   display: block;
   width: 100%;
   height: 100%;
+}
+.media-minimal-skin ::slotted(video) {
   border-radius: var(--media-border-radius, 0.75rem);
 }
+.media-minimal-skin video {
+  border-radius: inherit;
+}
 
 /* ==========================================================================
    Poster Image
@@ -28,3 +33,16 @@
     opacity: 0;
   }
 }
+
+/* ==========================================================================
+   Fullscreen
+   ========================================================================== */
+
+.media-minimal-skin:fullscreen video,
+.media-minimal-skin:fullscreen ::slotted(video),
+.media-minimal-skin > img {
+  object-fit: contain;
+}
+.media-minimal-skin:fullscreen ::slotted(video) {
+  border-radius: 0;
+}
diff --git a/packages/skins/src/minimal/css/components/root.css b/packages/skins/src/minimal/css/components/root.css
index 174ea673..f1113f4e 100644
--- a/packages/skins/src/minimal/css/components/root.css
+++ b/packages/skins/src/minimal/css/components/root.css
@@ -21,8 +21,4 @@
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-
-  &:fullscreen {
-    border-radius: 0;
-  }
 }
diff --git a/packages/skins/src/minimal/css/video.css b/packages/skins/src/minimal/css/video.css
index e712082f..090c0a47 100644
--- a/packages/skins/src/minimal/css/video.css
+++ b/packages/skins/src/minimal/css/video.css
@@ -20,20 +20,21 @@
 
 .media-minimal-skin--video {
   background: oklch(0 0 0);
+  --media-border-color: oklch(0 0 0 / 0.15);
 
-  /* Border ring */
+  @media (prefers-color-scheme: dark) {
+    --media-border-color: oklch(1 0 0 / 0.15);
+  }
+
+  /* Inner border ring */
   &::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 10;
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15);
+    box-shadow: inset 0 0 0 1px var(--media-border-color);
     pointer-events: none;
-
-    @media (prefers-color-scheme: dark) {
-      box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.15);
-    }
   }
 
   /* Fullscreen */
diff --git a/packages/skins/src/minimal/tailwind/video.tailwind.ts b/packages/skins/src/minimal/tailwind/video.tailwind.ts
index b6642cd9..f837bfc3 100644
--- a/packages/skins/src/minimal/tailwind/video.tailwind.ts
+++ b/packages/skins/src/minimal/tailwind/video.tailwind.ts
@@ -47,7 +47,12 @@ export const root = (isShadowDOM: boolean) =>
         ]
       : [],
     // Fullscreen
-    '[&:fullscreen]:rounded-none'
+    '[&:fullscreen]:rounded-none',
+    {
+      '[&:fullscreen_video]:object-contain': !isShadowDOM,
+      '[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none': isShadowDOM,
+    },
+    '[&:fullscreen>img]:object-contain'
   );
 
 /* ==========================================================================