OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../media-file.js"></script> | 2 <script src="../media-file.js"></script> |
3 <script> | 3 <script> |
4 var mediaFile = findMediaFile('video', '../content/test'); | 4 var mediaFile = findMediaFile('video', '../content/test'); |
5 </script> | 5 </script> |
6 <style> | 6 <style> |
7 .container { | 7 .container { |
8 position: relative; | 8 position: relative; |
9 display: inline-block; | 9 display: inline-block; |
10 width: 320px; | 10 width: 320px; |
11 height: 240px; | 11 height: 240px; |
12 } | 12 } |
13 .cue { | 13 .cue { |
14 position: absolute; | 14 position: absolute; |
15 top: 0; | 15 top: 0; |
16 left: 0; | 16 left: 0; |
17 right: 0; | 17 right: 0; |
18 overflow: hidden; | 18 overflow: hidden; |
19 } | 19 } |
20 .cue.start { | 20 .cue.start { |
21 text-align: start; | 21 right: 50%; |
philipj_slow
2015/01/22 15:27:59
The input here was { align: 'start', size: 50, lin
philipj_slow
2015/01/22 15:44:24
I'm just confused. The resulting box in which to p
| |
22 text-align: end; | |
22 } | 23 } |
23 .cue.middle { | 24 .cue.middle { |
24 text-align: center; | 25 text-align: center; |
25 } | 26 } |
26 .cue.end { | 27 .cue.end { |
27 text-align: end; | 28 left: 50%; |
29 text-align: start; | |
28 } | 30 } |
29 .cue > span { | 31 .cue > span { |
30 font-family: sans-serif; | 32 font-family: sans-serif; |
31 background: green; | 33 background: green; |
32 color: green; | 34 color: green; |
33 font-size: 50px; | 35 font-size: 50px; |
34 padding: 2px; | 36 padding: 2px; |
35 } | 37 } |
36 </style> | 38 </style> |
37 <div class="container"> | 39 <div class="container"> |
38 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi deo> | 40 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi deo> |
39 <div class=video><div class="cue start"><span>XXX</span></div></div> | 41 <div class=video><div class="cue start"><span>אבג</span></di v></div> |
40 </div> | 42 </div> |
41 <div class="container"> | 43 <div class="container"> |
42 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi deo> | 44 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi deo> |
43 <div class=video><div class="cue middle"><span>XXX</span></div></div> | 45 <div class=video><div class="cue middle"><span>אבג</span></d iv></div> |
44 </div> | 46 </div> |
45 <div class="container"> | 47 <div class="container"> |
46 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi deo> | 48 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi deo> |
47 <div class=video><div class="cue end"><span>XXX</span></div></div> | 49 <div class=video><div class="cue end"><span>אבג</span></div> </div> |
48 </div> | 50 </div> |
OLD | NEW |