video.html

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

<div class="video">
<div class="video-subtitles">
<div class="tc-wrapper">

  <div class="video-wrapper">
    <div class="video-player">
      <div id="ytapiplayer">
      </div>

      <iframe id="html5_player" type="text/html" frameborder="0">
      </iframe>
    </div>

    <section class="video-controls">
      <div id="slider"></div>

      <section>
        <ul class="vcr">
          <li><a id="video_control" class="pause">Pause</a></li>

          <li>
            <div id="vidtime">0:00 / 0:00</div>
          </li>
        </ul>


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

        <a href="#" class="add-fullscreen">Full screen</a>

        <a href="#" class="hide-subtitles">Captions</a>
        </div>
      </section>
    </section>
  </div>

  <ol class="subtitles">
    <!-- <li id="stt_n5"><div id="std_n7" onclick="title_seek(-7);"></div></li> -->
    <li id="stt_n4"><div id="std_n6" onclick="title_seek(-6);"></div></li>
    <li id="stt_n4"><div id="std_n5" onclick="title_seek(-5);"></div></li>
    <li id="stt_n4"><div id="std_n4" onclick="title_seek(-4);"></div></li>
    <li id="stt_n3"><div id="std_n3" onclick="title_seek(-3);"></div></li>
    <li id="stt_n2"><div id="std_n2" onclick="title_seek(-2);"></div></li>
    <li id="stt_n1"><div id="std_n1" onclick="title_seek(-1);"></div></li>
    <li id="stt_0 "class="current"><div id="std_0" onclick="title_seek(0);"></div></li>
    <li id="stt_p1"><div id="std_p1" onclick="title_seek( 1);"></div></li>
    <li id="stt_p2"><div id="std_p2" onclick="title_seek( 2);"></div></li>
    <li id="stt_p3"><div id="std_p3" onclick="title_seek( 3);"></div></li>
    <li id="stt_p4"><div id="std_p4" onclick="title_seek( 4);"></div></li>
    <li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
    <li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
    <li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
    <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
  </ol>
</div>

</div>
</div>

<%block name="js_extra">
<script type="text/javascript" charset="utf-8">
  $(function() {
      $('.add-fullscreen').click(function() {
          //var window_height = $(window).height();
          //var video_height = (window_height - 97) + 'px';
          //$('div.video-wrapper, div.tc-wrapper').css('max-height', window_height);
          //$('object#myytplayer').css('height', video_height);

          $('div.video-subtitles').toggleClass('fullscreen');

          if ($('div.video-subtitles').hasClass('fullscreen')) {
            $('div.video-subtitles').append('<a href="#" class="exit">Exit</a>');
            } else {
            $('a.exit').remove();
            }

          $('.exit').click(function() {
            $('div.video-subtitles').removeClass('fullscreen');
            $(this).remove();
            return false;
            });
          return false;
        });


      $('.hide-subtitles').click(function() {
        $('div.video-subtitles').toggleClass('closed');

        $(this).toggleClass("off");
        return false;
       });

      $("ol#video_speeds").hide();

      $("div.speeds").click(function() {
        $("ol#video_speeds").slideToggle(150);
        });

      });
</script>
</%block>