Logo


Tailored for MinPluto, customizable for you.


![Zorn using Milieu Mode](https://md.sudovanilla.org/images/Screenshot%20from%202024-08-16%2016-16-48.png)
## Installation To install Zorn for your Astro project, run the following: ```bash npm install @minpluto/zorn --registry https://npm.sudovanilla.org ``` Zorn uses icons from Iconoir using their Vue package, you'll need to integrate Astro's Vue package if you want to use the custom controls. Learn how: https://docs.astro.build/en/guides/integrations-guide/vue/#manual-install ## Examples **Basic Usage** Import `Zorn` from the package and add it to your page. ```jsx --- import {Zorn} from '@minpluto/zorn' --- ``` **With Separated Audio Source** Since Zorn is built for the MinPluto project, there are scenarios where the video source has no audio to get higher quality options, so Zorn has an option to add a seprated audio source to include. ```jsx --- import {Zorn} from '@minpluto/zorn' --- ``` Make sure to add `muted` to the `VideoAttributes` option, just in case. ## References **Title** - `Title` When the video enters fullscreen, the title of the video will appear in the upper left corner of the screen. ```jsx ``` **Poster** - `Poster` Setting a thumbnail for the video player is done using the [`poster`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#poster) attribute. Just use a valid URL. ```jsx ``` **Video Source** - `Video` The main part of the video player, is of course the video. You can set any video source you want, local or remote. Local: ```jsx ``` > [!NOTE] > Use the `/public/` folder in your Astro project. Remote: ```jsx ``` **Audio Source** - `Audio` If you're in a scenario where the video source is missing audio, but you do have the audio itself, you can add that audio source to the video player. A separated `