Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch 'feature/fluid-width'

  • Loading branch information...
commit 6658c5147474c1119a31958954ffaf954dae3604 2 parents 937b52d + 7839f2e
@heff heff authored
Showing with 30 additions and 24 deletions.
  1. +1 −0  CHANGELOG.md
  2. +29 −24 src/player.js
View
1  CHANGELOG.md
@@ -1,3 +1,4 @@
+* Added support for percent width/height and fluid layouts
* Improved load order of elements to reduce reflow.
* Changed addEvent function name to 'on'.
* Removed conflicting array.indexOf function
View
53 src/player.js
@@ -38,12 +38,9 @@ _V_.Player = _V_.Component.extend({
_V_.players[el.id] = this;
// Make box use width/height of tag, or default 300x150
- el.setAttribute("width", options.width);
- el.setAttribute("height", options.height);
-
// Enforce with CSS since width/height attrs don't work on divs
- el.style.width = options.width+"px";
- el.style.height = options.height+"px";
+ this.width(options.width, true); // (true) Skip resize listener on load
+ this.height(options.height, true);
// Update tag id/class for use as HTML5 playback tech
// Might think we should do this after embedding in container so .vjs-tech class
@@ -535,32 +532,40 @@ _V_.Player = _V_.Component.extend({
// http://dev.w3.org/html5/spec/dimension-attributes.html#attr-dim-height
// Video tag width/height only work in pixels. No percents.
- // We could potentially allow percents but won't for now until we can do testing around it.
- width: function(width, skipListeners){
- if (width !== undefined) {
- this.el.width = width;
- this.el.style.width = width+"px";
-
- // skipListeners allows us to avoid triggering the resize event when setting both width and height
- if (!skipListeners) { this.trigger("resize"); }
- return this;
- }
- return parseInt(this.el.getAttribute("width"));
+ // But allowing limited percents use. e.g. width() will return number+%, not computed width
+ width: function(num, skipListeners){
+ return this.dimension("width", num, skipListeners);
},
- height: function(height){
- if (height !== undefined) {
- this.el.height = height;
- this.el.style.height = height+"px";
- this.trigger("resize");
- return this;
- }
- return parseInt(this.el.getAttribute("height"));
+ height: function(num, skipListeners){
+ return this.dimension("height", num, skipListeners);
},
// Set both width and height at the same time.
size: function(width, height){
// Skip resize listeners on width for optimization
return this.width(width, true).height(height);
},
+ dimension: function(widthOrHeight, num, skipListeners){
+ if (num !== undefined) {
+
+ // Cache on object to be returned. Shouldn't have any effect after CSS.
+ this.el[widthOrHeight] = num;
+
+ // Check if using percent width/height and adjust
+ if ((""+num).indexOf("%") !== -1) {
+ this.el.style[widthOrHeight] = num;
+ } else {
+ this.el.style[widthOrHeight] = num+"px";
+ }
+
+ // skipListeners allows us to avoid triggering the resize event when setting both width and height
+ if (!skipListeners) { this.trigger("resize"); }
+ return this;
+ }
+
+ // Returns cached width/height in attribute.
+ // Could make this return computed width and support %s. Not a small amount of work.
+ return parseInt(this.el.getAttribute(widthOrHeight));
+ },
// Check if current tech can support native fullscreen (e.g. with built in controls lik iOS, so not our flash swf)
supportsFullScreen: function(){ return this.techGet("supportsFullScreen") || false; },
Please sign in to comment.
Something went wrong with that request. Please try again.