too_many_cues-ref.html (1159B)
1 <!DOCTYPE html> 2 <title>Reference for WebVTT rendering, too many cues - cues that cannot fit should not be shown</title> 3 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 4 <style> 5 html { overflow:hidden } 6 body { margin:0 } 7 .video { 8 display: inline-block; 9 width: 320px; 10 height: 180px; 11 position: relative; 12 } 13 .cue { 14 position: absolute; 15 bottom: 0; 16 left: 0; 17 right: 0; 18 text-align: center; 19 font: 20px/1 Ahem; 20 } 21 .cueText { 22 background: rgba(0,0,0,0.8); 23 color: green; 24 } 25 </style> 26 <div class="video"> 27 <span class="cue"> 28 <div><span class="cueText">This is a test</span></div> 29 <div><span class="cueText">This is a test</span></div> 30 <div><span class="cueText">This is a test</span></div> 31 <div><span class="cueText">This is a test</span></div> 32 <div><span class="cueText">This is a test</span></div> 33 <div><span class="cueText">This is a test</span></div> 34 <div><span class="cueText">This is a test</span></div> 35 <div><span class="cueText">This is a test</span></div> 36 <div><span class="cueText">This is a test</span></div> 37 </span> 38 </div>