title: Can HTML5 subtitles be positioned with css?
body: <p>I am using a custom HTML5 app for streaming videos on a local network, and now I am adding subtitles support.</p>
  
  <p>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 <code>margin-bottom</code>.</p>
  
  <p>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.</p>
  
  <p>Before coding a script to modify all the .vtt files to add <code>line:XX%</code> 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.</p>
  
  <p><em>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.</em> </p>
  
  <p>So the question is, <strong>can .vtt subtitles be positioned using CSS or any other method other than modifying the .vtt files?</strong></p>
  
  <p>This is the basic code I am using for testing:</p>
  
  <pre><code>&lt;video controls autoplay&gt;
      &lt;source src="http://192.168.0.1/video.mp4" type="video/mp4" /&gt;
      &lt;track src="http://192.168.0.1/subtitles.vtt" kind="subtitles" srclang="en" label="English" default /&gt;
  &lt;/video&gt;
  &lt;style&gt;
      video::cue {
          font-size:100%;
          color:white;
      }
  &lt;/style&gt;
  </code></pre>