Coding for Beginners: Creating a WebVTT File

Last week, we introduced the concept of a WebVTT file when discussing accessibility for media. Adding captions is a process by which we convert our audio content into text to display it on screen for when sound is muted or for those who are deaf or hard of hearing. The most popular format is the WebVTT file. WebVTT stands for "web video text track." It is compatible with almost all online video players, social media, and video editing software with sidecar captioning.

To create a .vtt file, you need a text editor and you have to type out the captions using a particular format. The document must start with "WebVTT" at the top. And there must be a blank line between each text block. These text blocks are called "cues," and they consist of an optional cue identifier, a time stamp written out in a particular format down to the milliseconds rounded to three digits, and the caption text.

Each cue in the VTT file can also include optional settings such as direction to change the styling or placement. These are added to the right of the cue timecode.

Once your file is ready, simply export it as a .vtt format. A WebVTT file can now be added as a captions file along with your project on YouTube, Vimeo, social media, or as a sidecar file with
editing software like Premiere Pro.

Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: http://get.designerslearncode.com/jumpstart

In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.