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!

You might also like to look at these

  • Oxygen builder has the potential to be a powerful force, but until they make basic improvements, it is not a "go to" for me.

    Continue reading
  • Adding features and power to WordPress with plugins is often necessary, but it should be done with planning and caution.

    Continue reading
  • Restoring "Local" sites is easy, even if you didn't use the backup process.

    Continue reading

Share This Story!

You might also like to look at these