bachir/jeunes-et-engages-d7
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2015-04-13 18:19:16 +02:00
parent e9dfffa4cf
commit 3d6818c692
1 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/js/jee.js
+25 -13
View File
@@ -831,8 +831,18 @@ jQuery(document).ready(function($) {
Chapter.prototype.buildVideos = function(){ Chapter.prototype.buildVideos = function(){
console.log('Chapter :: buildVideos'); 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.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 // redim each iframe to fit
// add a mask on top of each iframe to avoid bad interaction with vimeo // 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>') .after('<div class="mask"></div>')
.each(this.redimVideo.bind(this)); .each(this.redimVideo.bind(this));
var marge = (_container.w-this.dimvideo.w)/4;
this.$vids_container.css({ this.$vids_container.css({
width:this.dimvideo.w*1.2, width:this.dimvideo.w+marge,//*1.2,
height:this.dimvideo.h, height:this.dimvideo.h,
marginLeft:(_container.w-this.dimvideo.w*1.2)/2 marginLeft:marge
}); });
// create the slider with peppermint // create the slider with peppermint
@@ -853,19 +864,20 @@ jQuery(document).ready(function($) {
}; };
Chapter.prototype.redimVideo = function(i,e){ Chapter.prototype.redimVideo = function(i,e){
// compute proportional video width ragarding the parent height var $e = $(e);
this.dimvideo.w = (this.dimvideo.h * parseInt($(e).attr("width")))/parseInt($(e).attr("height"));
// apply thees sizes // apply thees sizes
$(e) $e
.css({ width:this.dimvideo.w, height:this.dimvideo.h }) .css({ width:this.dimvideo.w, height:this.dimvideo.h })
.attr({ 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() // $e.parent()
.css({ // .on("click", this.onClickVid.bind(this));
paddingLeft:this.dimvideo.w*0.15,
paddingright:this.dimvideo.w*0.15 // add some padding to parent for slider display
}) $e.parent()
// .on("click", this.onClickVid.bind(this)); .css({
paddingLeft:(_container.w-this.dimvideo.w)/4,
});
}; };
// not used // not used