snipette/weflock
snipette/weflock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixed Firefox responsive video bug

Browse source 
Closes https://github.com/TryGhost/Casper/issues/330

As usual Firefox is the bane of fucking everything and despite IE7 calling multiple times wanting its rendering back, here we are. Responsive video embeds insider a flexbox element do not work in Firefox and require an additional (very specific) wrapping div. I've adjusted the Fitvids.js script here to include that div in its injection along with the requisite styles. It's a horrible hack. Spent 2 hours trying to find another way but I cant.
This commit is contained in:
John O'Nolan 2017-07-31 19:38:16 +04:00
parent 2565c16916
commit f08f07fd7e
1 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/js/jquery.fitvids.js
View file

@ -1,10 +1,12 @@
/*jshint browser:true */ /*jshint browser:true */
/*! /*!
* FitVids 1.1 * FitVids 1.3
* *
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com *
* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation
* This is an unofficial release, ported by John O'Nolan
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/ * Released under the MIT license
* *
*/ */
@ -21,7 +23,7 @@
if(!document.getElementById('fit-vids-style')) { if(!document.getElementById('fit-vids-style')) {
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
var head = document.head || document.getElementsByTagName('head')[0]; var head = document.head || document.getElementsByTagName('head')[0];
var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}'; var css = '.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
var div = document.createElement("div"); var div = document.createElement("div");
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>'; div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
head.appendChild(div.childNodes[1]); head.appendChild(div.childNodes[1]);
@ -74,7 +76,7 @@
$this.attr('name', videoName); $this.attr('name', videoName);
$.fn.fitVids._count++; $.fn.fitVids._count++;
} }
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%'); $this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
$this.removeAttr('height').removeAttr('width'); $this.removeAttr('height').removeAttr('width');
}); });
}); });