[Summary view] [Print] [Text view]

   1  /**
   2   * File responsive-embeds.js.
   3   *
   4   * Make embeds responsive so they don't overflow their container.
   5   */
   6  
   7  /**
   8   * Add max-width & max-height to <iframe> elements, depending on their width & height props.
   9   *
  10   * @since Twenty Twenty-One 1.0
  11   *
  12   * @return {void}
  13   */
  14  function twentytwentyoneResponsiveEmbeds() {
  15      var proportion, parentWidth;
  16  
  17      // Loop iframe elements.
  18      document.querySelectorAll( 'iframe' ).forEach( function( iframe ) {
  19          // Only continue if the iframe has a width & height defined.
  20          if ( iframe.width && iframe.height ) {
  21              // Calculate the proportion/ratio based on the width & height.
  22              proportion = parseFloat( iframe.width ) / parseFloat( iframe.height );
  23              // Get the parent element's width.
  24              parentWidth = parseFloat( window.getComputedStyle( iframe.parentElement, null ).width.replace( 'px', '' ) );
  25              // Set the max-width & height.
  26              iframe.style.maxWidth = '100%';
  27              iframe.style.maxHeight = Math.round( parentWidth / proportion ).toString() + 'px';
  28          }
  29      } );
  30  }
  31  
  32  // Run on initial load.
  33  twentytwentyoneResponsiveEmbeds();
  34  
  35  // Run on resize.
  36  window.onresize = twentytwentyoneResponsiveEmbeds;