OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Reference for WebVTT rendering, ::cue(), font shorthand</title> | 2 <title>Reference for WebVTT rendering, ::cue(), font shorthand</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 .cue { | 13 .cue { |
13 position: absolute; | 14 position: absolute; |
14 bottom: 0; | 15 bottom: 0; |
15 left: 0; | 16 left: 0; |
16 right: 0; | 17 right: 0; |
17 font: italic small-caps bold 36px/72px sans-serif; | 18 font: italic small-caps bold 9px/18px sans-serif; |
18 text-align: center | 19 text-align: center |
19 } | 20 } |
20 .cue > span { | 21 .cue > span { |
21 background: rgba(0,0,0,0.8); | 22 background: rgba(0,0,0,0.8); |
22 color: white; | 23 color: white; |
23 } | 24 } |
24 </style> | 25 </style> |
25 <div class="video"><span class="cue"><span>This is a test subtitle that most lik
ely will span over several rows since it's a pretty long cue with a lot of text.
</span></span></div> | 26 <div class="video"><span class="cue"><span>This is a test subtitle that most lik
ely will span over several rows since it's a pretty long cue with a lot of text.
</span></span></div> |
OLD | NEW |