only transform height and witdh

static/css/application.css

@@ -2920,11 +2920,11 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   height: 7px;
-  -webkit-transition-property: all;
-  -moz-transition-property: all;
-  -ms-transition-property: all;
-  -o-transition-property: all;
-  transition-property: all;
+  -webkit-transition-property: height, 2s, ease-in-out;
+  -moz-transition-property: height, 2s, ease-in-out;
+  -ms-transition-property: height, 2s, ease-in-out;
+  -o-transition-property: height, 2s, ease-in-out;
+  transition-property: height, 2s, ease-in-out;
   -webkit-transition-duration: 0.15s;
   -moz-transition-duration: 0.15s;
   -ms-transition-duration: 0.15s;
@@ -2997,16 +2997,16 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   margin-left: -7px;
   top: -4px;
   width: 15px;
-  -webkit-transition-property: all;
-  -moz-transition-property: all;
-  -ms-transition-property: all;
-  -o-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.15s;
-  -moz-transition-duration: 0.15s;
-  -ms-transition-duration: 0.15s;
-  -o-transition-duration: 0.15s;
-  transition-duration: 0.15s;
+  -webkit-transition-property: height, 2s, ease-in-out;
+  -moz-transition-property: height, 2s, ease-in-out;
+  -ms-transition-property: height, 2s, ease-in-out;
+  -o-transition-property: height, 2s, ease-in-out;
+  transition-property: height, 2s, ease-in-out;
+  -webkit-transition-duration: width, 2s, ease-in-out;
+  -moz-transition-duration: width, 2s, ease-in-out;
+  -ms-transition-duration: width, 2s, ease-in-out;
+  -o-transition-duration: width, 2s, ease-in-out;
+  transition-duration: width, 2s, ease-in-out;
   -webkit-transition-timing-function: ease-out;
   -moz-transition-timing-function: ease-out;
   -ms-transition-timing-function: ease-out;

templates/sass/courseware/_video.scss

@@ -74,7 +74,7 @@ section.course-content {
           border-top: 1px solid #000;
           border-bottom: 1px solid #000;
           height: 7px;
-          @include transition();
+          @include transition(height 2.0s ease-in-out);
 
           div.ui-widget-header {
             background: #777;
@@ -121,7 +121,7 @@ section.course-content {
             margin-left: -7px;
             top: -4px;
             width: 15px;
-            @include transition();
+            @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
             @include background-size(50%);
 
             &:focus, &:hover {

templates/video_init.js

@@ -27,7 +27,7 @@ var captions=0;
 var slider = $('#slider')
 
 .slider({
-  range: "min", 
+  range: "min",
   slide: function(event,ui) {
     var slider_time = format_time(ui.value)