Can HTML5 subtitles be positioned with css?

Question

I am using a custom HTML5 app for streaming videos on a local network, and now I am adding subtitles support.

I have around 500 .vtt subtitles converted from .srt. After I converted them from .srt, I noticed they display right at the bottom of the screen, and I'd like them to have a little margin-bottom.

I am able to style the subtitles with css pseudo element ::cue, but only for font size, color, background. Doesn't seem to support any margin, padding or positioning rules.

Before coding a script to modify all the .vtt files to add line:XX% to the cues (that's the only way I found so far to move them), I was wondering if there's a way to position the subtitles without having to modify all the .vtt files.

If I disable my custom controls and tried the default controls instead. When a subtitle is displayed and I put the mouse over the video to show the controls, the subtitle do move up, and when the controls get auto hidden after a few seconds that line of subtitles stay at that place. But the next line move back down. This is the reason I am wondering if they can be moved without editing the .vtt files, since showing the controls move them up, maybe there's a way I can do it programmatically.

So the question is, can .vtt subtitles be positioned using CSS or any other method other than modifying the .vtt files?

This is the basic code I am using for testing:

<video controls autoplay>
    <source src="http://192.168.0.1/video.mp4" type="video/mp4" />
    <track src="http://192.168.0.1/subtitles.vtt" kind="subtitles" srclang="en" label="English" default />
</video>
<style>
    video::cue {
        font-size:100%;
        color:white;
    }
</style>

reading documentation seems you can't do it with CSS at least — Jaromanda X

internet-nico internet-nico · Accepted Answer · 2019-12-05T08:10:49

This isn't css, but incase new visitors want a solution with JS:

const track = document.getElementsByTagName('track')[0].track;

// Position the cue at the top
track.activeCues[0].line = 0;

// Position the cue at the bottom (default)
track.activeCues[0].line = -1;

// Move the cue up 3 lines to make room for video controls
track.activeCues[0].line = -4;

Can HTML5 subtitles be positioned with css?

4 Answers