Adding Video to WordPress

By |2018-06-27T07:23:06+00:00November 12th, 2017|Code|0 Comments

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> 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 URL

 

While 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

Leave a Reply