Merge pull request #433 from MITx/feature/kfiedler/courseware-style

Made video go to the center of the screen in full screen

common/lib/xmodule/xmodule/css/video/display.scss

@@ -14,7 +14,7 @@ div.video {
 
     section.video-player {
       height: 0;
-      // overflow: hidden;
+      overflow: hidden;
       padding-bottom: 56.25%;
       position: relative;
 
@@ -444,13 +444,13 @@ div.video {
     height: 100%;
     left: 0;
     margin: 0;
-    max-height: 100%;
     overflow: hidden;
     padding: 0;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 999;
+    vertical-align: middle;
 
     &.closed {
       ol.subtitles {
@@ -459,30 +459,17 @@ div.video {
       }
     }
 
-    a.exit {
-      color: #aaa;
-      display: none;
-      font-style: 12px;
-      left: 20px;
-      letter-spacing: 1px;
-      position: absolute;
-      text-transform: uppercase;
-      top: 20px;
-
-      &::after {
-        content: "✖";
-        @include inline-block();
-        padding-left: 6px;
-      }
-
-      &:hover {
-        color: $mit-red;
-      }
-    }
-
     div.tc-wrapper {
+      @include clearfix;
+      display: table;
+      width: 100%;
+      height: 100%;
+
       article.video-wrapper {
         width: 100%;
+        display: table-cell;
+        vertical-align: middle;
+        float: none;
       }
 
       object, iframe {

common/lib/xmodule/xmodule/js/src/video/display/video_player.coffee

@@ -130,13 +130,11 @@ class @VideoPlayer extends Subview
   toggleFullScreen: (event) =>
     event.preventDefault()
     if @el.hasClass('fullscreen')
-      @$('.exit').remove()
       @$('.add-fullscreen').attr('title', 'Fill browser')
       @el.removeClass('fullscreen')
     else
-      @el.append('<a href="#" class="exit">Exit</a>').addClass('fullscreen')
+      @el.addClass('fullscreen')
       @$('.add-fullscreen').attr('title', 'Exit fill browser')
-      @$('.exit').click @toggleFullScreen
     @caption.resize()
 
   # Delegates