How to add subtitles to your HTML videos ?

Jean-Marc
October 9, 2024

Try out for free our AI subtitles & dubbing

Join over 400+ companies scaling their translation projects with Checkub

It has never been easier to burn your subtites into your website's videos.

But encoding them manually in HTML offers endless customization and hosting possibilities.

In this guide, we'll cover everything you need to know about adding subtitles to your HTML video.

What is the Format of Subtitles in Your HTML Video?

When you want to add subtitles to your HTML video, the most common and recommended format is WebVTT (.vtt).

WebVTT is widely supported by modern browsers and is specifically designed for web use. It lets you include extra details like text styling and positioning, which can make the viewing experience better for your audience.

Another format you might use is SRT (.srt). SRT files are simpler and don't have the advanced features of WebVTT, like custom styling and positioning. SRT works well for basic subtitle needs, but it doesn’t offer much flexibility in terms of appearance. SRT files are compatible with most media players, but they might not give you the customization options you want for web use.

So WebVTT is often the better choice because of its versatility.

How to Implement Your Subtitles into Your Video

Adding subtitles to your HTML video can be done in just a few simple steps. Here’s a step-by-step guide to help you implement subtitles into your video using the WebVTT format.

Step 1: Create Your WebVTT File

First, you need to create a WebVTT file for your subtitles. You can use a ext editor like Notepad or any code editor to create it. The file should have a .vtt extension. In your WebVTT file, you will write the text of your subtitles along with timestamps that specify when each line should appear and disappear on the screen.

Here’s a simple example of what your WebVTT file might look like:

WEBVTT

00:00:00.000 --> 00:00:05.000
Welcome to our video tutorial.

00:00:05.001 --> 00:00:10.000
In this video, we'll show you how to add subtitles to your HTML video.

Make sure that the timestamps are accurate so that the subtitles are synchronized with the audio in your video.

Step 2: Add the WebVTT File to Your HTML Video

Once you’ve created your WebVTT file, the next step is to add it to your HTML video. To do this, you need to use the <track> element inside the <video> tag in your HTML code.

Here’s an example of how to add the subtitles to your video:

<video controls>
 <source src="your-video.mp4" type="video/mp4">
 <track src="your-subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

In this code, the <track> element is used to link the WebVTT file to the video. The kind attribute is set to “subtitles” to indicate that the track contains subtitles. The srclang attribute specifies the language of the subtitles, and the label attribute provides a name for the subtitle track that users can see when selecting subtitle options.

Step 3: Test Your Subtitles

After adding the WebVTT file to your HTML, you need to test your video to make sure the subtitles are working properly. Open the HTML file in a browser, play the video, and check if the subtitles appear at the right times. Make sure they are correctly synchronized with the audio and that all the text is displayed as expected.

Step 4: Troubleshoot Issues

If your subtitles aren’t showing up, there are a few things you can check. First, make sure the path to your WebVTT file is correct. Also, ensure that the file has the correct .vtt extension and that the timestamps are formatted properly. Finally, check that your browser supports WebVTT, although most modern browsers do.

How to Style Your Subtitles in Your HTML Video

Styling your subtitles is an important step to ensure they look good and are easy to read. By customizing the style, you can match the subtitles to the overall aesthetic of your video, making them less distracting and more visually appealing. Here’s how to style your subtitles step by step.

Step 1: Use the ::cue Pseudo-Element

To style your WebVTT subtitles, you need to use the ::cue pseudo-element in your CSS. The ::cue selector allows you to define the appearance of your subtitle text. You can change the font size, color, background, and even add shadows to make the text stand out more.

Here’s an example of how to use the ::cue pseudo-element:

::cue {
 color: white;
 background: rgba(0, 0, 0, 0.7);
 font-size: 16px;
 text-shadow: 1px 1px 2px black;
}

In this example, the subtitle text will be white, with a semi-transparent black background, and a subtle shadow to make it more readable against different backgrounds in the video.

Step 2: Customize Font and Colors

You can customize the font and colors to better fit your brand or the tone of your video. For example, if your video has a light background, you might want to use darker text colors for better visibility. Experiment with different combinations to find the one that works best.

::cue {
 font-family: Arial, sans-serif;
 font-size: 18px;
 color: #ffcc00;
 background: rgba(0, 0, 0, 0.5);
}

In this example, we’ve changed the font to Arial, increased the font size, and used a bright yellow color for the text to make it stand out.

Step 3: Test Your Styles

After adding your styles, it’s important to test them in different browsers and devices. Make sure the subtitles are readable and don’t overlap with important parts of your video. Test with different video scenes to ensure that the subtitles remain visible regardless of the background.

Step 4: Make Adjustments as Needed

If you find that your subtitles are not as readable as you'd like, adjust the styling until you are satisfied. You might need to increase the contrast between the text and background or adjust the font size for better readability.

By following these steps, you can ensure that your subtitles not only provide the necessary information but also enhance the overall viewing experience by being well-styled and easy to read.

Generate HTMLSubtitles Automatically : Checksub

Adding subtitles manually can be time-consuming, but tools like Checksub make the process much easier. :

Step 1: Upload Your Video

First, upload your video to the Checksub platform. It’s easy to do—just click the upload button and select your video file. Once uploaded, you need to choose the original language of your video. If you want subtitles in multiple languages, you can select those languages at this stage.

Step 2: Generate Subtitles

Checksub uses advanced speech recognition technology to automatically generate subtitles for your video. This feature saves you a lot of time compared to typing everything manually. Once the subtitles are generated, you can use the Checksub editor to make adjustments and ensure everything is accurate.

Step 3: Edit and Customize

After generating the subtitles, you can easily edit them within Checksub’s platform. The editor allows you to correct any errors, adjust the timing, and even split or merge subtitle segments as needed. This ensures that your subtitles are perfectly synchronized with the audio.

Step 4: Export in WebVTT Format

Once you’re happy with the subtitles, you can export them in WebVTT format. This file format is ideal for HTML videos and ensures compatibility across all major browsers. After exporting, you can add the WebVTT file to your HTML video following the steps mentioned earlier.

Want to generate accurate, high-quality subtitles quickly ? Try Checksub for free.

Share this post

Join 400+ companies scaling their translation projects with Checksub

1-hour video free trial
AI-powered dubbing and subtitle generator
+100 languages supported
MacBook mockup
Desk with computer
Explore topics
Trendy Articles

The Ultimate Guide to Video Game Dubbing

You want to know how they dub video games and examples ? Here we explain you everything.
Jean-Marc
24 Mar 2023
5
minute read

AI Localization : Your Starter Guide

You want to know how AI tools can improve your localization process and projects ? Here's your guide
Jean-Marc
24 Mar 2023
5
minute read

Is AI Dubbing Safe and Legal?

You want to know is AI dubbing are legal and safe ? We tell you everything here.
Jean-Marc
24 Mar 2023
5
minute read