OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Reference for WebVTT rendering, ::cue, css properties with value inherit
should inherit from media element</title> | 2 <title>Reference for WebVTT rendering, ::cue, css properties with value inherit
should inherit from media element</title> |
3 <style> | 3 <style> |
4 .video { | 4 .video { |
5 position: absolute; | 5 position: absolute; |
6 display: inline-block; | 6 display: inline-block; |
7 width: 1280px; | 7 width: 320px; |
8 height: 720px; | 8 height: 180px; |
9 position: relative; | 9 position: relative; |
10 color: #f0f; | 10 color: #f0f; |
11 white-space: pre-wrap; | 11 white-space: pre-wrap; |
12 font: italic small-caps bold 36px/72px sans-serif; | 12 font: italic small-caps bold 9px/18px sans-serif; |
13 text-decoration: overline underline line-through; | 13 text-decoration: overline underline line-through; |
14 text-shadow: 0px 0px 5px #0f0; | 14 text-shadow: 0px 0px 5px #0f0; |
15 background: #0f0 url('../../media/background.gif') repeat-x top left; | 15 background: #0f0 url('../../media/background.gif') repeat-x top left; |
16 outline: solid #00f 2px; | 16 outline: solid #00f 2px; |
| 17 font-size: 9px; |
17 } | 18 } |
18 .videoWhite { | 19 .videoWhite { |
19 position: absolute; | 20 position: absolute; |
20 top: 0; | 21 top: 0; |
21 left: 160px; | 22 left: 40px; |
22 width: 960px; | 23 width: 240px; |
23 height: 720px;; | 24 height: 180px;; |
24 background: #fff; | 25 background: #fff; |
25 z-index: 1; | 26 z-index: 1; |
26 } | 27 } |
27 .cue { | 28 .cue { |
28 position: absolute; | 29 position: absolute; |
29 bottom: 0; | 30 bottom: 0; |
30 left: 30%; | 31 left: 30%; |
31 right: 0; | 32 right: 0; |
32 width: 40%; | 33 width: 40%; |
33 text-align: center; | 34 text-align: center; |
34 outline: inherit; | 35 outline: inherit; |
35 text-shadow: inherit; | 36 text-shadow: inherit; |
36 text-decoration: inherit; | 37 text-decoration: inherit; |
37 outline-bottom: none; | 38 outline-bottom: none; |
38 z-index: 2 | 39 z-index: 2 |
39 } | 40 } |
40 .cue > span { | 41 .cue > span { |
41 background: #0f0 url('../../media/background.gif') repeat-x top left; | 42 background: #0f0 url('../../media/background.gif') repeat-x top left; |
42 text-decoration: inherit; | 43 text-decoration: inherit; |
43 white-space: pre-wrap | 44 white-space: pre-wrap |
44 } | 45 } |
45 </style> | 46 </style> |
46 <div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A
A A A A A A A A</span></span></div> | 47 <div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A
A A A A A A A A</span></span></div> |
OLD | NEW |