ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

responsive-embeds.js (1127B)

      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;