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

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). */

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>

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>