diff --git a/examples/html-demo/src/main.ts b/examples/html-demo/src/main.ts
index 19202c30..1d2dd9d9 100644
--- a/examples/html-demo/src/main.ts
+++ b/examples/html-demo/src/main.ts
@@ -7,8 +7,8 @@ defineVjsPlayer();
 document.body.innerHTML = /* html */ `
   <media-provider>
     <div style="display: grid; place-items: center; min-height: 100vh;">
-      <media-skin-frosted style="border-radius: 2rem; width: 100%; max-width: 800px; margin: 2rem auto;">
-        <video slot="media" src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4" muted></video>
+      <media-skin-frosted style="border-radius: 2rem; width: 100%; max-width: 960px; margin: 2rem auto; aspect-ratio: 16/9">
+        <video slot="media" src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4" muted playsinline poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"></video>
       </media-skin-frosted>
     </div>
   </media-provider>
diff --git a/examples/react-demo/src/App.tsx b/examples/react-demo/src/App.tsx
index 4e45254a..565b1b71 100644
--- a/examples/react-demo/src/App.tsx
+++ b/examples/react-demo/src/App.tsx
@@ -111,9 +111,9 @@ export default function App(): JSX.Element {
   const skinClassName = useMemo(() => {
     switch (skinKey) {
       case 'frosted':
-        return 'rounded-4xl shadow shadow-lg shadow-black/15';
+        return 'aspect-video rounded-4xl shadow shadow-lg shadow-black/15';
       case 'minimal':
-        return 'rounded-2xl shadow shadow-lg shadow-black/15';
+        return 'aspect-video rounded-2xl shadow shadow-lg shadow-black/15';
       default:
         return '';
     }
@@ -185,7 +185,7 @@ export default function App(): JSX.Element {
           <MediaProvider key={key}>
             <Skin className={skinClassName}>
               {/* @ts-expect-error -- types are incorrect */}
-              <Video src={mediaSource} poster={poster} />
+              <Video src={mediaSource} poster={poster} playsinline />
             </Skin>
           </MediaProvider>
         </div>
diff --git a/packages/html/src/skins/frosted/styles.css b/packages/html/src/skins/frosted/styles.css
index c696d89e..bdf818af 100644
--- a/packages/html/src/skins/frosted/styles.css
+++ b/packages/html/src/skins/frosted/styles.css
@@ -10,6 +10,7 @@ media-container {
   font-size: 0.8125rem;
   line-height: 1.5;
   border-radius: inherit;
+  background: oklab(0 0 0);
 }
 media-container::before,
 media-container::after {
diff --git a/packages/react/src/skins/frosted/styles.ts b/packages/react/src/skins/frosted/styles.ts
index 49f36e32..d026fdaf 100644
--- a/packages/react/src/skins/frosted/styles.ts
+++ b/packages/react/src/skins/frosted/styles.ts
@@ -12,7 +12,7 @@ function cn(...classes: (string | undefined)[]): string {
 const styles: FrostedSkinStyles = {
   MediaContainer: cn(
     'vjs', // Scope preflight
-    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip',
+    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black',
     // Base typography
     'vjs:text-[0.8125rem]', // 13px
     // Prevent rounded corners in fullscreen.
@@ -21,7 +21,7 @@ const styles: FrostedSkinStyles = {
     'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',
     'vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0',
     // Ensure the nested video inherits the radius.
-    'vjs:[&_video]:rounded-[inherit] vjs:[&_video]:w-full vjs:[&_video]:h-auto',
+    'vjs:[&_video]:w-full vjs:[&_video]:h-full',
   ),
   Overlay: cn(
     'vjs:opacity-0 vjs:delay-500 vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-gradient-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',
diff --git a/packages/react/src/skins/minimal/styles.ts b/packages/react/src/skins/minimal/styles.ts
index fa165051..863aa7a8 100644
--- a/packages/react/src/skins/minimal/styles.ts
+++ b/packages/react/src/skins/minimal/styles.ts
@@ -20,7 +20,7 @@ const styles: MinimalSkinStyles = {
     // Prevent rounded corners in fullscreen.
     'vjs:[&:fullscreen]:rounded-none vjs:[&:fullscreen]:[&_video]:h-full vjs:[&:fullscreen]:[&_video]:w-full',
     // Ensure the nested video inherits the radius.
-    'vjs:[&_video]:rounded-[inherit] vjs:[&_video]:w-full vjs:[&_video]:h-auto',
+    'vjs:[&_video]:w-full vjs:[&_video]:h-full',
   ),
   Overlay: cn(
     'vjs:absolute vjs:inset-0 vjs:rounded-[inherit] vjs:pointer-events-none',