fixed videos redimenssioning and placement works now every where for any width or height

sites/all/themes/gui/jee/js/jee.js

@@ -831,8 +831,18 @@ jQuery(document).ready(function($) {
 
       Chapter.prototype.buildVideos = function(){
         console.log('Chapter :: buildVideos');
+        var $first_vid = this.$vids.eq(0);
 
+        // compute proportional video width regarding the parent height
         this.dimvideo.h = this.$vids_container.height();
+        this.dimvideo.w = (this.dimvideo.h * parseInt($first_vid.attr("width")))/parseInt($first_vid.attr("height"));
+
+        // if resulted width if larger than container
+        // first get good width and then calculate proportional height
+        if(this.dimvideo.w > _container.w){
+          this.dimvideo.w = _container.w *0.8;
+          this.dimvideo.h = (this.dimvideo.w * parseInt($first_vid.attr("height")))/parseInt($first_vid.attr("width"));
+        }
 
         // redim each iframe to fit
         // add a mask on top of each iframe to avoid bad interaction with vimeo
@@ -840,10 +850,11 @@ jQuery(document).ready(function($) {
           .after('<div class="mask"></div>')
           .each(this.redimVideo.bind(this));
 
+        var marge = (_container.w-this.dimvideo.w)/4;
         this.$vids_container.css({
-          width:this.dimvideo.w*1.2,
+          width:this.dimvideo.w+marge,//*1.2,
           height:this.dimvideo.h,
-          marginLeft:(_container.w-this.dimvideo.w*1.2)/2
+          marginLeft:marge
         });
 
         // create the slider with peppermint
@@ -853,19 +864,20 @@ jQuery(document).ready(function($) {
       };
 
       Chapter.prototype.redimVideo = function(i,e){
-        // compute proportional video width ragarding the parent height
-        this.dimvideo.w = (this.dimvideo.h * parseInt($(e).attr("width")))/parseInt($(e).attr("height"));
+        var $e = $(e);
         // apply thees sizes
-        $(e)
+        $e
           .css({ width:this.dimvideo.w, height:this.dimvideo.h })
-          .attr({ width:this.dimvideo.w, height:this.dimvideo.h })
-            // add some paading to parent for slider display
-            .parent()
-              .css({
-                paddingLeft:this.dimvideo.w*0.15,
-                paddingright:this.dimvideo.w*0.15
-              })
-              // .on("click", this.onClickVid.bind(this));
+          .attr({ width:this.dimvideo.w, height:this.dimvideo.h });
+
+        // $e.parent()
+        //  .on("click", this.onClickVid.bind(this));
+
+        // add some padding to parent for slider display
+        $e.parent()
+          .css({
+            paddingLeft:(_container.w-this.dimvideo.w)/4,
+          });
       };
 
       // not used