Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcomontalbano/video-to-markdown
How to embed a video in markdown? Here the answer. Add videos to your markdown files easier.
https://github.com/marcomontalbano/video-to-markdown
asciinema cleanshot cloudinary dailymotion facebook google-drive loom markdown netlify netlify-lambda onedrive parcel peertube streamable tiktok travis-ci video vimeo wistia youtube
Last synced: 5 days ago
JSON representation
How to embed a video in markdown? Here the answer. Add videos to your markdown files easier.
- Host: GitHub
- URL: https://github.com/marcomontalbano/video-to-markdown
- Owner: marcomontalbano
- License: mit
- Created: 2018-09-06T17:46:43.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-06-16T22:53:03.000Z (7 months ago)
- Last Synced: 2024-12-30T02:18:59.902Z (13 days ago)
- Topics: asciinema, cleanshot, cloudinary, dailymotion, facebook, google-drive, loom, markdown, netlify, netlify-lambda, onedrive, parcel, peertube, streamable, tiktok, travis-ci, video, vimeo, wistia, youtube
- Language: JavaScript
- Homepage: https://video-to-markdown.marcomontalbano.com
- Size: 6.41 MB
- Stars: 209
- Watchers: 3
- Forks: 25
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - marcomontalbano/video-to-markdown - How to embed a video in markdown? Here the answer. Add videos to your markdown files easier. (JavaScript)
README
Video to Markdown
=================
[](https://github.com/marcomontalbano/video-to-markdown/actions/workflows/test.yaml)
[](https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/nfvt85kdqleszdah0hxq?t=default)
[](https://www.paypal.me/marcomontalbano)
[](https://github.com/sponsors/marcomontalbano)
[](https://app.netlify.com/sites/video-to-markdown/deploys)
Add videos to your markdown files easier [starting from here](https://video-to-markdown.marcomontalbano.com/)!
## Why?
How often did you find yourself googling _¨How to embed a video in markdown?¨_
While its not possible to embed a video in markdown, the best and easiest way is to extract a frame from the video, add a layer with a play icon and link the video url on the image.
Speaking HTMLese, this is what you would do:
```html
```
that translates into markdown as:
```md
[]({video-url} "Link Title")
```
To speed up the process I developped this tool that will do it for you.
You just need to paste the video url in the field above and you will get the markdown you need.
## Features
List of supported video providers:
- [x] Asciinema
- [x] CleanShot Cloud
- [x] Dailymotion
- [x] Facebook (low-quality)
- [x] Google Drive
- [x] Imgur
- [x] Loom
- [x] OneDrive
- [x] PeerTube
- [x] Streamable
- [x] TikTok
- [x] Vimeo
- [x] Wistia
- [x] Youtube
## Hosting
First of all you need to create a [Cloudinary] account (I'm using this service to generate and host images) so that you can copy your personal `CLOUDINARY_URL` from your dashboard. The url is something similar to `cloudinary://my_key:my_secret@my_cloud_name`.
Now you can easily deploy your own copy on Netlify.
[](https://app.netlify.com/start/deploy?repository=https://github.com/marcomontalbano/video-to-markdown)
## Development stuff
To run the project locally, here’s what you’ll need:
### Requirements
* [Cloudinary] account
* [Node.js](https://nodejs.org/) 18.14 or greater
### Setup
`cd` into your local copy of the repository and run `pnpm install`
```sh
cd video-to-markdown
pnpm install
```
```sh
cp .env.sample .env
# update the .env with proper values
```
* `CLOUDINARY_URL` ( **required** ) - this is the `API Environment variable` that you can get from your Cloudinary dashboard inside the **Account Details** section.
* `GA_TRACKING_ID` ( _optional_ ) - this is a Google Analytics Tracking ID. Can be used if you need to track page views and events.
* `NETLIFY_ACCESS_TOKEN` ( _optional_ ) - this a Netlify Access Token. In combination with the `SITE_ID` can be used to display the **API Usage** in the website.
* `SITE_ID` ( _optional_ ) - this the Netlify Site ID. In combination with the `NETLIFY_ACCESS_TOKEN` can be used to display the **API Usage** in the website.
* `USE_HIGH_QUALITY` ( _optional_ ) - this is a boolean flag. If `true`, the generated images will be stored in Contenful with hi-res quality (default to `false`)
```sh
pnpm dev
# http://localhost:8888
```
## Privacy
Google Analytics is used to record the following:
* [Basic visit data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631).
* `referer` or `video url` to track api usage.
All images are generated via [Cloudinary] and stored in it.
In this way the generated images are cached so we can avoid to call Netlify functions again thus reducing the quota consumption.
By clicking on `convert to markdown` or consuming api you accept this terms & condition; no additional data is sent to the server.
[Cloudinary]: https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/nfvt85kdqleszdah0hxq?t=default