Captions for videos formatted like the captions for images

Development
1

Hi Everyone,

I would like to insert captions for the videos I upload to my book, and have them formatted just like the captions for the images.

When I insert a video, the caption is not inserted, even if the video does have a caption in the media library. Once inserted, if I click on it to edit it, there is no field to insert a caption (in contrast with what happens with the images).

I have tried to do it via HTML. Captions for images seem to be inside the HTML tag figcaption and with the class wp-caption-text, i.e.

<figcaption class="wp-caption-text">...</figcaption>

But I have not been able to use the tag in the editor, and using just the class “wp-caption-text” for e.g. the tag <p> does not give the same result.

Any ideas?

Thanks a lot,
Luis

2

Hi Luis,

It sounds like what you’re describing is adding a caption for a video element, not captions/subtitles for the video file itself. I don’t think I’ve ever seen this as a feature request/issue in Pressbooks before. In part I think this is because the spec for captions defines a caption as a description of a still image, not moving ones (as you’d get in video). For more on captions/subtitles for videos, see https://github.com/WordPress/gutenberg/issues/7673#issuecomment-405080772 or https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video.

If you’d like to display a ‘caption’ or description of the video below the player, like you would with a still image, perhaps you could try using the caption shortcode as described here: http://justintadlock.com/archives/2011/07/01/captions-in-wordpress. I suspect that the captions themselves won’t be styled as you’d expect for this use case, because the shortcode is intended to work with image captions, but could perhaps be fixed with a bit of CSS. Don’t know what will happen in export formats yet, but I’d be curious to find out more. If you notice anything buggy or want to file a feature request to improve this, you’re always welcome to write something up for us in our ideas repo: https://github.com/pressbooks/ideas

3

Thank you so much Steel,
As you guessed, I wanted to display a description of the video below the player. I could not manage to make the method explained at the justintadlock.com site work because Pressbooks did not like the shortcode [caption] inside [video].

My temporary fix is to mimic the classes that image captions have, i.e:

<div class="chapter" style="max-width: 700px; margin: auto;">
<div class="wp-caption aligncenter">
<div class="wp-caption-text">
My caption
</div></div></div>

If I come up with something more elegant, I’ll let you know.
Thanks a lot for your help
Luis

4

I ended up submitting this request to the ideas repo:

5

Make captions automatically appear for an embedded video by adding “&cc_load_policy=1” to the video’s embed code.

You can also choose a caption language for the embedded youtube video. To specify the caption language for the video that you’d like to embed, just add “&cc_lang_pref=fr&cc_load_policy=1” to the video’s embed code.

“cc_lang_pref” sets the language for the captions shown in the video.
“cc_load_policy=1” turns captions on by default.
“fr” represents the language code for French. You can look up 2-letter language codes in the ISO 639-1 standard.