From a897c6b2558a1df25613c7be27c168aeb43274a3 Mon Sep 17 00:00:00 2001 From: Jason Darwin Date: Mon, 28 Sep 2015 12:10:03 +1300 Subject: [PATCH 1/2] Remove errant .css('height') && .css('width') checks iFrames have a default width (300px) and height (150px): http://stackoverflow.com/questions/5871668/default-width-height-of-an-iframe Becuase of this, .css('height') && .css('width') will return these default values, meaning that our video ends up with an aspect ratio of 2:1 rather than 16:9 --- jquery.fitvids.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.fitvids.js b/jquery.fitvids.js index 3742b4e..6e55670 100644 --- a/jquery.fitvids.js +++ b/jquery.fitvids.js @@ -61,7 +61,7 @@ return; // Disable FitVids on this video. } if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } - if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width')))) + if ((isNaN($this.attr('height')) || isNaN($this.attr('width')))) { $this.attr('height', 9); $this.attr('width', 16); From 46332915df2cf6201b7250a378987cc8c547baba Mon Sep 17 00:00:00 2001 From: Jason Darwin Date: Wed, 30 Sep 2015 11:55:28 +1300 Subject: [PATCH 2/2] Ensure videos with height/width in the style attribute are made responsive --- jquery.fitvids.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/jquery.fitvids.js b/jquery.fitvids.js index 6e55670..9b4984d 100644 --- a/jquery.fitvids.js +++ b/jquery.fitvids.js @@ -60,8 +60,9 @@ if($this.parents(ignoreList).length > 0) { return; // Disable FitVids on this video. } + if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } - if ((isNaN($this.attr('height')) || isNaN($this.attr('width')))) + if ((!/height/.test($this.attr('style')) && !/width/.test($this.attr('style'))) && (isNaN($this.attr('height')) || isNaN($this.attr('width')))) { $this.attr('height', 9); $this.attr('width', 16); @@ -75,6 +76,11 @@ } $this.wrap('
').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%'); $this.removeAttr('height').removeAttr('width'); + // Now that we've used any height/width (typically specified in px) in the style attribute + // to make this iframe responsive, remove the height/width as they'd otherwise contrain the iframe. + if ($this.attr('style')) { + $this.css({height: '', width: ''}); + } }); }); };