2

Is there any way to position html5 video subtitles 30px from bottom with javascript or css, Something like that.

<track kind="captions" label="English" srclang="en" src="en.vtt" default/>

.track{
    margin-bottom: 30px;
}
Alex Cross
  • 33
  • 5
  • 1
    No, the track itself cannot be positioned differently. Tracks can be styled with the [`::cue`](https://developer.mozilla.org/en-US/docs/Web/CSS/::cue) pseudo selector, but positioning, margins and paddings are not permitted properties. You'd need to create your own kind of track like in [this answer](https://stackoverflow.com/a/45087610/11619647) to get full control. – Emiel Zuurbier Oct 23 '20 at 18:27

1 Answers1

0

Not specifically 30px but you can use VTTCue.line to generate a similar margin, such as -3 (i.e. 3 lines from the bottom).

Inspired by the code behind Test WebVTT Cue Settings and Styling (which was jQuery while mine is Vanilla), I basically loop through all cues and change their lines to -3.

For convenience, I even do it dynamically based on a form input field.

This is how it'd look like if I used a line of 5 (i.e. 5 lines from the top): Top subtitles

var track_elem = document.querySelector('track');

track_elem.addEventListener('loaded',initialize_test,false); // Bug in FF31 MAC: wrong event name
track_elem.addEventListener('load',initialize_test,false);

function initialize_test() {
  var i, j, track, video = document.querySelector('video');
  track = video.textTracks;
  for (i=0; i<track.length; i++)
    for (j=0; j<track[i].cues.length; j++)
      track[i].cues[j].line = parseInt(document.querySelector('#input-change-line').value);
}
<form>
Line position: <input type="number" min="-20" value="-3" max="100" step="1" id="input-change-line" onchange="initialize_test()">
</form>

<video controls autoplay>
  <source src="replace_with_an_actual_link.mp4" type="video/mp4">
  <track src="replace_with_an_actual_link.vtt" kind="subtitles" srclang="en" label="English" default>
</video>
LWC
  • 1,084
  • 1
  • 10
  • 28