diff --git a/src/assets/js/front-end.js b/src/assets/js/front-end.js index f073964c9..d35e76365 100644 --- a/src/assets/js/front-end.js +++ b/src/assets/js/front-end.js @@ -39,6 +39,34 @@ var BoldGrid = BoldGrid || {}; this.skipLink(); this.forms(); this.cssVarsPonyfill(); + this.responsiveVideos(); + }, + + // Handle responsive video iframe embeds. + responsiveVideos: function() { + $( window ).on( 'resize', function() { + var proportion, + parentWidth; + + // Loop iframe elements. + document.querySelectorAll( 'iframe' ).forEach( function( iframe ) { + + // Only continue if the iframe has a width & height defined. + if ( iframe.width && iframe.height ) { + + // Calculate the proportion/ratio based on the width & height. + proportion = parseFloat( iframe.width ) / parseFloat( iframe.height ); + + // Get the parent element's width. + parentWidth = parseFloat( window.getComputedStyle( iframe.parentElement, null ).width.replace( 'px', '' ) ); + + // Set the max-width & height. + iframe.style.maxWidth = '100%'; + iframe.style.maxHeight = Math.round( parentWidth / proportion ).toString() + 'px'; + } + } ); + + } ); }, // Observe classList changes on body element.