Switch to semantic versioning
Calm down about self hosting in stock instances
Add Sourcehut repo
Add captions to embedded YouTube videos (and others)
VTT Embed allows you to embed videos from external sources and add your own caption tracks. It’s all CGI — so there’s no need for your users to run JavaScript — and there’s already a hosted instance if you don’t want to set up your own (please do if you can though). It was also designed to avoid violating copyright so it should be safe to include this on your site.
VTT Embed also has many more features. Below are examples of some of the ways you can use it. There is also a demo if you’d like to see it in action.
VTT Embed works by being a source in an HTML <video> or <audio> element. You
select the source video — and optionally the format — you want via URL
parameters. This makes it extremely easy to set up and allows you to use it in
many different ways.
What follows is a more advanced description of how to use it. If you just go to the script’s address (see the hosted instance link above) there is a nice UI which will generate the embed code for you. Skip this section
There are two parameters you can use: url and format. url is the
percent-encoded URL of to the page with the video you’d like to embed; it is the
only required parameter. format is the youtube-dl format you’d like to
use. It defaults to format=best if you do not specify it. (VTT Embed also uses
Semantic Versioning 2...
The most basic way to use it is in the src attribute of the <video> tag:
<video controls src="https://dj-chase.com/cgi-bin/vtt-embed.sh?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvv208qmcVeo">
It looks like your browser can’t display videos inline. You can still
<a href="https://dj-chase.com/cgi-bin/vtt-embed.sh?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvv208qmcVeo">download
the video directly</a> or
<a href="https://www.youtube.com/watch?v=vv208qmcVeo">watch it on YouTube</a>.
</video>
<p>You can also <a href="https://www.youtube.com/watch?v=vv208qmcVeo">watch this
video on YouTube</a>.</p>
To keep these examples clean, I’m going to omit the fallback text from now on. You should still include it in practice, though.
Captions are added just like you would for any other HTML <video> element:
<video controls src="https://dj-chase.com/cgi-bin/vtt-embed.sh?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvv208qmcVeo">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
</video>
<p>You can also <a href="https://www.youtube.com/watch?v=vv208qmcVeo">watch this
video on YouTube (no captions)</a>.</p>
WebVTT can also be used for providing Audio Description:
<video controls src="https://dj-chase.com/cgi-bin/vtt-embed.sh?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvv208qmcVeo">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
<track src="description.vtt" kind="descriptions" srclang="en" label="English">
</video>
<p>You can also <a href="https://www.youtube.com/watch?v=vv208qmcVeo">watch this
video on YouTube (no captions or Audio Description)</a>.</p>
It’d be kind if you included a lower resolution option for people with slow connections (method from Adrian Roselli):
<video controls>
<source media="(prefers-reduced-data: reduce)"
src="https://dj-chase.com/cgi-bin/vtt-embed.sh?format=worst&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvv208qmcVeo">
<source src="https://dj-chase.com/cgi-bin/vtt-embed.sh?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvv208qmcVeo">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
<track src="description.vtt" kind="descriptions" srclang="en" label="English">
</video>
<p>You can also <a href="https://www.youtube.com/watch?v=vv208qmcVeo">watch this
video on YouTube (no captions or Audio Description)</a>.</p>
Sometimes podcasts are distributed as a video. If you’d like, VTT Embed can also be used to embed a video’s audio only:
<audio controls>
<source media="(prefers-reduced-data: reduce)"
src="https://dj-chase.com/cgi-bin/vtt-embed.sh?format=worstaudio&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvv208qmcVeo">
<source src="https://dj-chase.com/cgi-bin/vtt-embed.sh?format=bestaudio&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvv208qmcVeo">
<source src="https://dj-chase.com/cgi-bin/vtt-embed.sh?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dvv208qmcVeo">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
</audio>
<p>You can also <a href="https://www.youtube.com/watch?v=vv208qmcVeo">watch this
as a video on YouTube (no captions)</a>.</p>
The fastest way to get support would be to join the VTT Embed room on Matrix.
You can also email the mailing list if you’d prefer, but it will definately be slower.
VTT Embed is designed not to get you a DMCA request as long as you are allowed to embed the video in the first place. This section details how it does this. I am not a lawyer, however, and this is not legal advice. By embedding someone else’s video you of course assume responsibility.
VTT Embed does not host, stream, or copy videos. Instead, it merely locates the direct link on the provided page and redirects clients to it. It’s similar to Invidious, except even more hands-off. Using it to embed a video is therefore as safe or safer than embedding a video from Invidious. It should also be as safe as embedding a video directly from YouTube, as long as you are allowed to embed the video from YouTube in the first place.