[codex] fix intrinsic media aspect ratio handling (#1197)

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}>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>