OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Reference for WebVTT rendering, line percent and integer mixed with overl
ap move up</title> | 2 <title>Reference for WebVTT rendering, line percent and integer mixed with overl
ap move up</title> |
3 <style> | 3 <style> |
4 html { overflow:hidden } | 4 html { overflow:hidden } |
5 body { margin:0 } | 5 body { margin:0 } |
6 .video { | 6 .video { |
7 display: inline-block; | 7 display: inline-block; |
8 width: 1280px; | 8 width: 320px; |
9 height: 720px; | 9 height: 180px; |
10 position: relative | 10 position: relative; |
| 11 font-size: 9px; |
11 } | 12 } |
12 #cue1 { | 13 #cue1 { |
13 position: absolute; | 14 position: absolute; |
14 top: 376.2px; | 15 top: 94.05px; |
15 left: 0; | 16 left: 0; |
16 right: 0; | 17 right: 0; |
17 text-align: center | 18 text-align: center |
18 } | 19 } |
19 #cue2 { | 20 #cue2 { |
20 position: absolute; | 21 position: absolute; |
21 top: 324px; | 22 top: 81px; |
22 left: 0; | 23 left: 0; |
23 right: 0; | 24 right: 0; |
24 text-align: center | 25 text-align: center |
25 } | 26 } |
26 .cue > span { | 27 .cue > span { |
27 font-family: Ahem, sans-serif; | 28 font-family: Ahem, sans-serif; |
28 background: rgba(0,0,0,0.8); | 29 background: rgba(0,0,0,0.8); |
29 color: green; | 30 color: green; |
30 font-size: 36px; | |
31 } | 31 } |
32 </style> | 32 </style> |
33 <div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</sp
an></span><span id="cue2" class="cue"><span>This is another test subtitle</span>
</span></div> | 33 <div class="video"><span id="cue1" class="cue"><span>This is a test subtitle</sp
an></span><span id="cue2" class="cue"><span>This is another test subtitle</span>
</span></div> |
OLD | NEW |