Open WordPress video with subtitles in lightbox popup

Last updated on

This tutorial will guide you how to open an HTML5 video with subtitles in WordPress lightbox popup. There are 2 steps in this tutorial:

  • Step 1 - Install Wonder Lightbox
  • Step 2 - Enable video lightbox and add video subtitle .vtt file

The created demo is as follows: Video Lightbox with Subtitles

Step 1 - Install Wonder Lightbox

First please install the WordPress premium plugin Wonder Lightbox. You can download the free version from the plugin home page, test it, make sure it works for you before upgrading to the commercial version.

Step 2 - Enable video lightbox and add video subtitle .vtt file

With Wonder Lightbox, opening a video in a lightbox popup is easy and straightforward. You only need to add a CSS classname wplightbox to the <a> video link.

To add video captions, add a data attribute data-showsubtitle="true", then add a data attribute data-vtturl to specify the subtitle .vtt file.

An online demo is as follows: Video Lightbox with Captions

The HTML code is as follows:

<a href="https://www.wonderplugin.com/download/wordpress-carousel.mp4" class="wplightbox" data-showsubtitle="true" data-vtturl="https://www.wonderplugin.com/wp-content/uploads/2019/07/video-subtitle.vtt">Video Lightbox with Captions</a>

If data-showsubtitle="true" is added and a .vtt file is provided, the video captions will be displayed by default. To close the video captions by default, add an extra data attribute data-showsubtitlebydefault="false". For example:

<a href="https://www.wonderplugin.com/download/wordpress-carousel.mp4" class="wplightbox" data-showsubtitle="true" data-vtturl="https://www.wonderplugin.com/wp-content/uploads/2019/07/video-subtitle.vtt" data-showsubtitlebydefault="false">Video Lightbox with Captions</a>

About .vtt file

A .vtt file or WebVTT (Web Video Text Tracks Format) file defines the subtitles or captions for video content.

A .vtt file is a text file, you can create the file or edit it with a text editor. An example is as follows:

WEBVTT

00:01.000 --> 00:20.000
Wonder Carousel - Responsive WordPress Carousel Plugin

00:20.000 --> 00:40.000
Wonder Carousel is the best WordPress carousel plugin to create WordPress image and video carousel.

00:40.000 --> 01:00.000
Support WordPress posts, custom post types, WooCommerce, images, Mp4 and WebM videos, YouTube and Vimeo.

At the beginning of the file, there is a line WEBVTT, then each paragraph defines the time span and the subtitle. For example, the above .vtt file adds three captions to the video content, from 1 second to 20 second, 20 second to 40 second and 40 second to 1 minute.

For more information about vtt file format, please view the document: WebVTT: The Web Video Text Tracks Format.