mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-23 03:57:38 +00:00
Fixed Firefox responsive video bug
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:
parent
2565c16916
commit
f08f07fd7e
@ -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');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user