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.
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.
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.
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.
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.
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.
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.
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.
::cue Pseudo-ElementTo 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.
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.
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.
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.
Adding subtitles manually can be time-consuming, but tools like Checksub make the process much easier. :
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.
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.
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.
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.
