% if name is not UNDEFINED and name != None:
  <h1> ${name} </h1>
% endif

<div id="video_${id}" class="video">
  <div class="tc-wrapper">
    <article class="video-wrapper">
      <section class="video-player">
        <div id="${id}"></div>
      </section>

      <section class="video-controls">
        <div class="slider"></div>
        <div>
          <ul class="vcr">
            <li><a class="video_control play">Play</a></li>
            <li>
              <div class="vidtime">0:00 / 0:00</div>
            </li>
          </ul>

          <div class="secondary-controls">
            <div class="speeds">
              <a href="#">
                <h3>Speed</h3>
                <p class="active"></p>
              </a>
              <ol class="video_speeds"></ol>
            </div>

            <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
            <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
          </div>
        </div>
      </section>
    </article>

    <ol class="subtitles">
      <li>Attempting to load captions...</li>
    </ol>
  </div>
</div>

<%block name="js_extra">
<script type="text/javascript">
  $(function(){
    new Video('${id}', ${streams});
  });
</script>
</%block>

<ol class="video-mod">
% for t in annotations:
  <li id="video-${annotations.index(t)}">
    ${t[1]['content']}
  </li>
% endfor
</ol>