diff --git a/packages/skins/src/default/css/components/overlay.css b/packages/skins/src/default/css/components/overlay.css
index 4fb82213..fb2e0c25 100644
--- a/packages/skins/src/default/css/components/overlay.css
+++ b/packages/skins/src/default/css/components/overlay.css
@@ -6,7 +6,7 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
+  background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3) 25%, oklch(0 0 0 / 0));
   border-radius: inherit;
   opacity: 0;
   backdrop-filter: blur(0) saturate(1);
diff --git a/packages/skins/src/default/css/video.css b/packages/skins/src/default/css/video.css
index 79222611..c506eaa9 100644
--- a/packages/skins/src/default/css/video.css
+++ b/packages/skins/src/default/css/video.css
@@ -162,8 +162,6 @@
   bottom: 0.5rem;
   z-index: 10;
   flex-wrap: wrap;
-  max-width: 56rem;
-  margin-inline: auto;
   color: var(--media-color-primary, oklch(1 0 0));
   transform-origin: bottom;
   transition-timing-function: var(--media-controls-transition-timing-function);
diff --git a/packages/skins/src/default/tailwind/components/overlay.ts b/packages/skins/src/default/tailwind/components/overlay.ts
index 4910e197..6411f4cd 100644
--- a/packages/skins/src/default/tailwind/components/overlay.ts
+++ b/packages/skins/src/default/tailwind/components/overlay.ts
@@ -6,7 +6,7 @@ export const overlay = cn(
   'pointer-events-none rounded-[inherit]',
   // Default: hidden
   'opacity-0',
-  'bg-linear-to-t from-black/50 via-black/30 to-transparent',
+  'bg-linear-to-t from-black/50 via-black/30 via-25% to-transparent',
   'backdrop-blur-none backdrop-saturate-100',
   // Transitions
   'transition-[opacity,backdrop-filter]',
diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts
index b103e41b..ad582b56 100644
--- a/packages/skins/src/default/tailwind/video.tailwind.ts
+++ b/packages/skins/src/default/tailwind/video.tailwind.ts
@@ -96,7 +96,6 @@ export const controls = cn(
   surface,
   // Position & wrapping layout (small)
   'absolute bottom-2 inset-x-2 flex-wrap',
-  'mx-auto max-w-4xl',
   '[color:var(--media-color-primary,oklch(1_0_0))] z-10',
   'peer-data-open/error:hidden',
   'ease-(--media-controls-transition-timing-function) origin-bottom',
diff --git a/packages/skins/src/minimal/css/video.css b/packages/skins/src/minimal/css/video.css
index 99b963bc..4796798d 100644
--- a/packages/skins/src/minimal/css/video.css
+++ b/packages/skins/src/minimal/css/video.css
@@ -162,9 +162,7 @@
   z-index: 10;
   flex-wrap: wrap;
   column-gap: 0.5rem;
-  max-width: 56rem;
   padding: 0.25rem;
-  margin-inline: auto;
   color: oklch(1 0 0);
   border-radius: 0.75rem;
   transition-timing-function: var(--media-controls-transition-timing-function);
diff --git a/packages/skins/src/minimal/tailwind/video.tailwind.ts b/packages/skins/src/minimal/tailwind/video.tailwind.ts
index 1d8aeb90..64cffd64 100644
--- a/packages/skins/src/minimal/tailwind/video.tailwind.ts
+++ b/packages/skins/src/minimal/tailwind/video.tailwind.ts
@@ -90,7 +90,6 @@ export const controls = cn(
   // Position & wrapping layout (small)
   'absolute bottom-1 inset-x-1',
   'p-1 gap-x-2 flex-wrap rounded-xl',
-  'mx-auto max-w-4xl',
   'text-white z-10',
   'peer-data-open/error:hidden',
   'ease-(--media-controls-transition-timing-function)',