diff --git a/web/themes/custom/geofresco/dist/js/responsive-iframes.js b/web/themes/custom/geofresco/dist/js/responsive-iframes.js new file mode 100644 index 0000000..6443dca --- /dev/null +++ b/web/themes/custom/geofresco/dist/js/responsive-iframes.js @@ -0,0 +1,27 @@ +// From https://benmarshall.me/responsive-iframes/ +// Note that the JavaScript approach does not combine with his recommended CSS +// approach, and it would probably be better/smoother to combine them. +// @TODO Or, best, write a text formatter that does the below and assigns the +// appropriate class, for example .embed-responsive-4by3 + +// Find all iframes +var $iframes = $( "iframe" ); + +// Find and save the aspect ratio for all iframes +$iframes.each(function () { + $( this ).data( "ratio", this.height / this.width ) + // Remove the hardcoded width & height attributes + .removeAttr( "width" ) + .removeAttr( "height" ); +}); + +// Resize the iframes when the window is resized +$( window ).resize( function () { + $iframes.each( function() { + // Get the parent container's width + var width = $( this ).parent().width(); + $( this ).width( width ) + .height( width * $( this ).data( "ratio" ) ); + }); +// Resize to fix all iframes on page load. +}).resize();