From f08f07fd7ecb47183b0df795136d8f889c0467f5 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@onolan.org>
Date: Mon, 31 Jul 2017 19:38:16 +0400
Subject: [PATCH] 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.
---
 assets/js/jquery.fitvids.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/assets/js/jquery.fitvids.js b/assets/js/jquery.fitvids.js
index 0b4680e..edf1d7f 100644
--- a/assets/js/jquery.fitvids.js
+++ b/assets/js/jquery.fitvids.js
@@ -1,10 +1,12 @@
 /*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/
-* 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')) {
       // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
       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");
       div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
       head.appendChild(div.childNodes[1]);
@@ -74,7 +76,7 @@
           $this.attr('name', videoName);
           $.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');
       });
     });