Awesome
Markdown Videos
An open source website and API that adds a play button to a youtube video thumbnail, provided the video link or ID. Markdown Videos lets you embed Youtube videos into GitHub markdown with ease!
Showcase
Preview | Info | |
---|---|---|
Before | https://youtu.be/8lGpZkjnkt4 | <ul><li>No Preview</li><li>Redirects to video</li></ul> |
After | <ul><li>Clearly shows it's a youtube video</li><li>Play button and backdrop added</li><li>Black bars removed</li><li>Redirects to video</li></ul> | |
After (GIF) | <ul><li>Clearly shows it's a youtube video</li><li>Play button and backdrop added</li><li>:sparkles: Animated GIF :sparkles: </li><li>Redirects to video</li></ul> |
Supported video services
- Youtube
- Vimeo
How to use?
The simplest way to use markdown-videos is to use the website. If you want to use the API, see the API README for more info
Why choose Markdown-Videos?
Excellent performance, trusted by over 100k users (apparently)! | |
People when they see Markdown-Videos |
Contributing
Markdown Videos is still under development, please open an issue if you find any bugs, or if you want to suggest new features.
Pull requests are also accepted and highly appreciated.
You can also contribute by buying me a coffee on Ko-fi
If you want to contribute to the codebase, please read on.
Local development
Wanna work only with the python or javascript stuff? check out Additional info
Prerequisites
I also highly recommend using VS Code for local development, and installing the workspace's recommended extensions.
install, run, build, etc...
install dependencies
pnpm install # installs web dependencies
pnpm api:install # installs api dependencies
create a new .env file from the .env.example
cp .env.example .env
run the api and website
pnpm dev
If you make changes make sure to run linting and testing before opening a PR
pnpm lint
pnpm test
Additional info
In case you want more documentation on either the website or the api.
The API is built with Python, FastAPI, Pillow and Pipenv
The website is built with Svelte, Vite, Typescript, SCSS and pnpm