The other day I was asked how to add subtitles to video in WordPress, and unless my google powers have diminished, I could not find an easy way to do it without hand coding <video width=”300″ height=”150″> and <track /> elements. It turns out, in typical WP fashion it is easy, but atypically not immediately obvious.

Knowing that WordPress uses MediaElements.js under the hood, I knew it had to be possible, but when you use Add Media, Insert from URL, the default behavior adds the source URL inside embed tags.insert from URLWhile this may be fine for simply adding a video, there are no additional capabilities.The key is to switch to text view and change the embed shortcode to the video shortcode and move the URL to the source attribute. If you are familiar with the html5 <video> tag this will look very familiar.


Now, the surprise. Switch back to visual and then click on the edit icon (pencil). You will be treated with a very nice user interface that allows you to add multiple video sources, subtitle/caption files, and the placeholder image.

user interface for editing video

You will need to make sure the caption files are WebVTT (.vtt) format, the server has the MIME type enabled (text/vtt), and the caption files are local to the website.

Here is the video with Spanish and English subtitles available.

Featured image by Hello I’m Nik on Unsplash

Featured image by: 

Let me know what you think about this post.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share This Story!

Related articles

  • Read My Love-Hate Relationship with Oxygen

    February 15, 2021

  • Read Exploring WordPress Plugins

    February 12, 2021

  • Read Recovering a LocalWP Site

    December 19, 2020