# Zorn ![Preview of Zorn with default theme set](https://img.sudovanilla.com/dhHcB5l.png) > Currently in beta stages. ## What is Zorn? A custom HTMl5 video player for the web using vanilla JavaScript. ## Installation ### Package Manager With NPM: ```bash npm install @sudovanilla/zorn ``` With Yarn: ```bash yarn add @sudovanilla/zorn ``` With Bun: ```bash bun add @sudovanilla/zorn ``` With PNPM: ```bash pnpm install @sudovanilla/zorn ``` ### Yarn PnP If you are using Yarn it's PnP feature enabled, please unplug Zorn Player, add the following to your package.json file: ```json "dependenciesMeta": { "@sudovanilla/zorn": { "unplugged": true } } ``` Also make sure you are setting the correct path to the script and css file when adding them to your website or app. ## Usage ### HTML5 Add Zorn at the bottom of your HTML page: ```html ... ``` Then, add a video to the page inside a div with the class name set to `video-container`. Inside this div, will be the video element with the class name set as `zorn-player`. ```html
``` ___ ### Express Route the files required for Zorn Player to work in Express (Tested with PokeTube): ``` const ZornDirectory = "./node_modules/@sudovanilla/zorn/" module.exports = function (app, config, renderTemplate) { app.get("/player/zorn.js", function (req, res) {res.sendFile("/dist/index.js", { root: ZornDirectory })}) } ``` Add the stylesheet and script: ```html ``` Then, add a video to the page inside a div with the class name set to `video-container`. Inside this div, will be the video element with the class name set as `zorn-player`. ```html
```