Tring to get overlay to work with display table

templates/sass/courseware/_video.scss

@@ -5,9 +5,13 @@ section.course-content {
     border-top: 1px solid #e1e1e1;
     border-bottom: 1px solid #e1e1e1;
     background: #f3f3f3;
-    position: relative;
     @include clearfix();
 
+    // div.tc-wrapper {
+    //   display: table-cell;
+    //   width: 100%;
+    // }
+
     div.video-wrapper {
       float: left;
       width: flex-grid(6, 9);
@@ -358,6 +362,34 @@ section.course-content {
         height: 0;
       }
     }
+
+    &.fullscreen {
+      background: rgba(#000, .95);
+      border: 0;
+      padding: 0;
+      height: 100%;
+      left: 22px;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 999;
+
+      div.tc-wrapper {
+        padding: 20px;
+        vertical-align: middle;
+        display: table-cell;
+      }
+
+      ol.subtitles {
+        li {
+          color: #aaa;
+
+          &.current {
+            color: #fff;
+          }
+        }
+      }
+    }
   }
 }
 

templates/video.html

@@ -3,6 +3,7 @@
 % endif
 
 <div class="video-subtitles">
+<div class="tc-wrapper">
 
   <div class="video-wrapper">
     <div class="video-player">
@@ -33,6 +34,8 @@
           <ol id="video_speeds"></ol>
         </div>
 
+        <a href="#" class="add-fullscreen">Full screen</a>
+
         <a href="#" class="hide-subtitles">Captions</a>
         </div>
       </section>
@@ -57,18 +60,31 @@
     <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>
 
 <%block name="js_extra">
 <script type="text/javascript" charset="utf-8">
   $(function() {
+      $('.add-fullscreen').click(function(){
+          $('div.video-subtitles').toggleClass('fullscreen');
+          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>