VTT Embed

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.

Usage

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...

Basic usage

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.

Adding captions

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>

Adding Audio Description

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>

Multiple resolutions

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>

Audio only

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>

Support

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.

Copyright

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.