From c2ee84470488212e2f7efc4a669972d629d1fd67 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 16 Aug 2012 13:47:15 -0400 Subject: [PATCH] Made video go to the center of the screen in full screen --- .../xmodule/xmodule/css/video/display.scss | 33 ++++++------------- .../js/src/video/display/video_player.coffee | 4 +-- 2 files changed, 11 insertions(+), 26 deletions(-) diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 9e32de941a..aca575ac98 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/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 { diff --git a/common/lib/xmodule/xmodule/js/src/video/display/video_player.coffee b/common/lib/xmodule/xmodule/js/src/video/display/video_player.coffee index 0ef091d6b3..4b265d20c8 100644 --- a/common/lib/xmodule/xmodule/js/src/video/display/video_player.coffee +++ b/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('Exit').addClass('fullscreen') + @el.addClass('fullscreen') @$('.add-fullscreen').attr('title', 'Exit fill browser') - @$('.exit').click @toggleFullScreen @caption.resize() # Delegates