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

feat(site): replace home page tech preview player with real player (#580)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-03-04 09:34:10 -06:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 410fc01350
commit f623e676f2
8 changed files with 43 additions and 2066 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/how-to/customize-skins.mdx
+2 -94
View File
@@ -1,100 +1,8 @@
---
title: Customize skins
description: Learn how to customize Video.js v10 skins by copying and modifying them
description: Learn how to customize Video.js skins
---
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs.tsx';
import {
generateHTMLCSS,
generateHTMLJS,
generateHTMLMarkup,
generateReactComponent,
generateReactCSS,
} from '@/utils/ejectCodeGenerator';
Video.js v10 comes with pre-built skins like Frosted and Minimal, but you can fully customize them by "ejecting" the code and making it your own.
While eventually we'll have a CLI that'll eject skins in your preferred framework and style, for now we invite you to try it out with these copy-paste-ready implementations.
## Frosted skin
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:idle>
<TabsList client:idle label="Frosted React implementation">
<Tab client:idle value="component" initial>FrostedSkin.tsx</Tab>
<Tab client:idle value="css">frosted.css</Tab>
</TabsList>
<TabsPanel client:idle value="component" initial>
<ServerCode code={generateReactComponent('frosted')} lang="tsx" />
</TabsPanel>
<TabsPanel client:idle value="css">
<ServerCode code={generateReactCSS('frosted')} lang="css" />
</TabsPanel>
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:idle>
<TabsList client:idle label="Frosted HTML implementation">
<Tab client:idle value="markup" initial>HTML</Tab>
<Tab client:idle value="js">JS</Tab>
<Tab client:idle value="css">CSS</Tab>
</TabsList>
<TabsPanel client:idle value="markup" initial>
<ServerCode code={generateHTMLMarkup('frosted')} lang="html" />
</TabsPanel>
<TabsPanel client:idle value="js">
<ServerCode code={generateHTMLJS('frosted')} lang="typescript" />
</TabsPanel>
<TabsPanel client:idle value="css">
<ServerCode code={generateHTMLCSS('frosted')} lang="css" />
</TabsPanel>
</TabsRoot>
</FrameworkCase>
## Minimal skin
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:idle>
<TabsList client:idle label="Minimal React implementation">
<Tab client:idle value="react" initial>MinimalSkin.tsx</Tab>
<Tab client:idle value="css">minimal.css</Tab>
</TabsList>
<TabsPanel client:idle value="react" initial>
<ServerCode code={generateReactComponent('minimal')} lang="tsx" />
</TabsPanel>
<TabsPanel client:idle value="css">
<ServerCode code={generateReactCSS('minimal')} lang="css" />
</TabsPanel>
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:idle>
<TabsList client:idle label="Minimal HTML implementation">
<Tab client:idle value="html" initial>HTML</Tab>
<Tab client:idle value="js">JS</Tab>
<Tab client:idle value="css">CSS</Tab>
</TabsList>
<TabsPanel client:idle value="html" initial>
<ServerCode code={generateHTMLMarkup('minimal')} lang="html" />
</TabsPanel>
<TabsPanel client:idle value="js">
<ServerCode code={generateHTMLJS('minimal')} lang="typescript" />
</TabsPanel>
<TabsPanel client:idle value="css">
<ServerCode code={generateHTMLCSS('minimal')} lang="css" />
</TabsPanel>
</TabsRoot>
</FrameworkCase>
🚧 Under construction 🚧