zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add aspect-ratio to demos (#136)

Browse Source
This commit is contained in:
Sam Potts
2025-10-25 17:11:00 +11:00
committed by GitHub
parent 3bd50ebac8
commit e0a46de0ab
5 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/html-demo/src/main.ts
+2 -2
View File
@@ -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>
examples/react-demo/src/App.tsx
+3 -3
View File
@@ -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>