From 31ccb1f6eecb095d304ef4035e170bb3867d174d Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 2 Apr 2026 22:40:55 +1100
Subject: [PATCH] [codex] fix intrinsic media aspect ratio handling (#1197)

---
 apps/sandbox/templates/cdn/main.ts                      | 2 +-
 apps/sandbox/templates/html-dash-video/main.ts          | 2 +-
 apps/sandbox/templates/html-hls-video/main.ts           | 2 +-
 apps/sandbox/templates/html-mux-video/main.ts           | 2 +-
 apps/sandbox/templates/html-simple-hls-video/main.ts    | 2 +-
 apps/sandbox/templates/html-video/main.ts               | 2 +-
 apps/sandbox/templates/react-dash-video/main.tsx        | 2 +-
 apps/sandbox/templates/react-hls-video/main.tsx         | 7 +------
 apps/sandbox/templates/react-mux-video/main.tsx         | 7 +------
 apps/sandbox/templates/react-simple-hls-video/main.tsx  | 7 +------
 apps/sandbox/templates/react-video/main.tsx             | 7 +------
 packages/html/src/define/shared.css                     | 3 ++-
 site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx | 2 +-
 site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx | 2 +-
 14 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/apps/sandbox/templates/cdn/main.ts b/apps/sandbox/templates/cdn/main.ts
index d96ba8a4..7016a3cd 100644
--- a/apps/sandbox/templates/cdn/main.ts
+++ b/apps/sandbox/templates/cdn/main.ts
@@ -138,7 +138,7 @@ async function render() {
 
   root.innerHTML = html`
     <${playerTag}>
-      <${skinTag} class="w-full aspect-video max-w-4xl mx-auto">
+      <${skinTag} class="aspect-video max-w-4xl mx-auto">
         <${mediaTag} src="${src}" playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </${mediaTag}>
diff --git a/apps/sandbox/templates/html-dash-video/main.ts b/apps/sandbox/templates/html-dash-video/main.ts
index a74b616d..3e28c698 100644
--- a/apps/sandbox/templates/html-dash-video/main.ts
+++ b/apps/sandbox/templates/html-dash-video/main.ts
@@ -21,7 +21,7 @@ async function render() {
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
-      <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+      <${tag} class="aspect-video max-w-4xl mx-auto">
         <dash-video src="${SOURCES[state.source].url}" playsinline>
           ${renderStoryboard(storyboard)}
         </dash-video>
diff --git a/apps/sandbox/templates/html-hls-video/main.ts b/apps/sandbox/templates/html-hls-video/main.ts
index 69ff1dcb..b9f9b974 100644
--- a/apps/sandbox/templates/html-hls-video/main.ts
+++ b/apps/sandbox/templates/html-hls-video/main.ts
@@ -21,7 +21,7 @@ async function render() {
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
-      <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+      <${tag} class="aspect-video max-w-4xl mx-auto">
         <hls-video src="${SOURCES[state.source].url}" playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </hls-video>
diff --git a/apps/sandbox/templates/html-mux-video/main.ts b/apps/sandbox/templates/html-mux-video/main.ts
index 546b42eb..edcd096f 100644
--- a/apps/sandbox/templates/html-mux-video/main.ts
+++ b/apps/sandbox/templates/html-mux-video/main.ts
@@ -26,7 +26,7 @@ async function render() {
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
-      <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+      <${tag} class="aspect-video max-w-4xl mx-auto">
         <mux-video ${sourceAttr} debug playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </mux-video>
diff --git a/apps/sandbox/templates/html-simple-hls-video/main.ts b/apps/sandbox/templates/html-simple-hls-video/main.ts
index f49e92a9..823eac92 100644
--- a/apps/sandbox/templates/html-simple-hls-video/main.ts
+++ b/apps/sandbox/templates/html-simple-hls-video/main.ts
@@ -21,7 +21,7 @@ async function render() {
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
-      <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+      <${tag} class="aspect-video max-w-4xl mx-auto">
         <simple-hls-video src="${SOURCES[state.source].url}" playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </simple-hls-video>
diff --git a/apps/sandbox/templates/html-video/main.ts b/apps/sandbox/templates/html-video/main.ts
index 0c4cfa4b..c82fb701 100644
--- a/apps/sandbox/templates/html-video/main.ts
+++ b/apps/sandbox/templates/html-video/main.ts
@@ -20,7 +20,7 @@ async function render() {
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
-      <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+      <${tag} class="aspect-video max-w-4xl mx-auto">
         <video src="${SOURCES[state.source].url}" playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </video>
diff --git a/apps/sandbox/templates/react-dash-video/main.tsx b/apps/sandbox/templates/react-dash-video/main.tsx
index 185127a1..22ad3f6e 100644
--- a/apps/sandbox/templates/react-dash-video/main.tsx
+++ b/apps/sandbox/templates/react-dash-video/main.tsx
@@ -20,7 +20,7 @@ function App() {
 
   return (
     <VideoProvider>
-      <VideoSkinComponent skin={skin} styling={styling} className="w-full aspect-video max-w-4xl mx-auto">
+      <VideoSkinComponent skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
         <DashVideo src={SOURCES[source].url} playsInline />
       </VideoSkinComponent>
     </VideoProvider>
diff --git a/apps/sandbox/templates/react-hls-video/main.tsx b/apps/sandbox/templates/react-hls-video/main.tsx
index 87f5ab6d..149cdbf0 100644
--- a/apps/sandbox/templates/react-hls-video/main.tsx
+++ b/apps/sandbox/templates/react-hls-video/main.tsx
@@ -25,12 +25,7 @@ function App() {
 
   return (
     <VideoProvider>
-      <VideoSkinComponent
-        poster={poster}
-        skin={skin}
-        styling={styling}
-        className="w-full aspect-video max-w-4xl mx-auto"
-      >
+      <VideoSkinComponent poster={poster} skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
         <HlsVideo src={SOURCES[source].url} playsInline crossOrigin="anonymous">
           <Storyboard src={storyboard} />
         </HlsVideo>
diff --git a/apps/sandbox/templates/react-mux-video/main.tsx b/apps/sandbox/templates/react-mux-video/main.tsx
index 039a192e..f093ddea 100644
--- a/apps/sandbox/templates/react-mux-video/main.tsx
+++ b/apps/sandbox/templates/react-mux-video/main.tsx
@@ -28,12 +28,7 @@ function App() {
 
   return (
     <VideoProvider>
-      <VideoSkinComponent
-        poster={poster}
-        skin={skin}
-        styling={styling}
-        className="w-full aspect-video max-w-4xl mx-auto"
-      >
+      <VideoSkinComponent poster={poster} skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
         <MuxVideo {...sourceAttr} debug playsInline crossOrigin="anonymous">
           <Storyboard src={storyboard} />
         </MuxVideo>
diff --git a/apps/sandbox/templates/react-simple-hls-video/main.tsx b/apps/sandbox/templates/react-simple-hls-video/main.tsx
index 3567639a..6fbfeffe 100644
--- a/apps/sandbox/templates/react-simple-hls-video/main.tsx
+++ b/apps/sandbox/templates/react-simple-hls-video/main.tsx
@@ -25,12 +25,7 @@ function App() {
 
   return (
     <VideoProvider>
-      <VideoSkinComponent
-        poster={poster}
-        skin={skin}
-        styling={styling}
-        className="w-full aspect-video max-w-4xl mx-auto"
-      >
+      <VideoSkinComponent poster={poster} skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
         <SimpleHlsVideo src={SOURCES[source].url} playsInline crossOrigin="anonymous">
           <Storyboard src={storyboard} />
         </SimpleHlsVideo>
diff --git a/apps/sandbox/templates/react-video/main.tsx b/apps/sandbox/templates/react-video/main.tsx
index 124db892..cb195405 100644
--- a/apps/sandbox/templates/react-video/main.tsx
+++ b/apps/sandbox/templates/react-video/main.tsx
@@ -25,12 +25,7 @@ function App() {
 
   return (
     <VideoProvider>
-      <VideoSkinComponent
-        poster={poster}
-        skin={skin}
-        styling={styling}
-        className="w-full aspect-video max-w-4xl mx-auto"
-      >
+      <VideoSkinComponent poster={poster} skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
         <Video src={SOURCES[source].url} playsInline crossOrigin="anonymous">
           <Storyboard src={storyboard} />
         </Video>
diff --git a/packages/html/src/define/shared.css b/packages/html/src/define/shared.css
index 456d624a..76360bf4 100644
--- a/packages/html/src/define/shared.css
+++ b/packages/html/src/define/shared.css
@@ -2,9 +2,10 @@ media-tooltip-group {
   display: contents;
 }
 
-/* Fixes a weird issue with Safari when setting aspect-ratio */
 :host {
+  /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */
   display: grid;
+  width: 100%;
 }
 
 /* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */
diff --git a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx
index 6c7ad9af..0ff5fdcb 100644
--- a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx
+++ b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx
@@ -19,7 +19,7 @@ const Player = createPlayer({ features: videoFeatures });
 export function FrostedSkinDemo() {
   return (
     <Player.Provider>
-      <VideoSkin className="w-full aspect-video" poster={VJS10_DEMO_VIDEO.poster}>
+      <VideoSkin className="aspect-video" poster={VJS10_DEMO_VIDEO.poster}>
         <Video src={VJS10_DEMO_VIDEO.mp4} playsInline />
       </VideoSkin>
     </Player.Provider>
diff --git a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx
index 4637a2d6..a297141d 100644
--- a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx
+++ b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx
@@ -17,7 +17,7 @@ const Player = createPlayer({ features: videoFeatures });
 export function MinimalSkinDemo() {
   return (
     <Player.Provider>
-      <MinimalVideoSkin className="w-full aspect-video" poster={VJS10_DEMO_VIDEO.poster}>
+      <MinimalVideoSkin className="aspect-video" poster={VJS10_DEMO_VIDEO.poster}>
         <Video src={VJS10_DEMO_VIDEO.mp4} playsInline />
       </MinimalVideoSkin>
     </Player.Provider>