Support » Theme: Twenty Twenty-One » Iframe resizing

  • responsive-embeds.js has code to resize all iframes that have a width and height set. This is causing an issue with some iframes that shouldn’t have a max-height set this way and causing them to be cut off.

    Two possible fixes I can think of:

    1. Instead of just checking if width and height are set, check to see if one or the other is set to a percentage value. I have an iframe set to 400px tall and 100% wide that should not be getting assigned any particular aspect ratio.

    2. Before setting a max-height at the end of the script, do a final check to ensure the max-height isn’t less than the height.

Viewing 1 replies (of 1 total)
  • Hello,

    The JavaScript in this file …

    function twentytwentyoneResponsiveEmbeds() {
    	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';
    		}
    	} );
    }

    … isn’t huge so it wouldn’t take much modification, then the default .js file could be dequeued and the new version queued.

    Perhaps this would work for you …

    function twentytwentyoneResponsiveEmbeds() {
    	var proportion, parentWidth;
    
    	// Loop iframe elements.
    	document.querySelectorAll( 'iframe' ).forEach( function( iframe ) {
    		// Only continue if the iframe has a width & height defined and neither are percentage values
    		if ( iframe.width && iframe.height && !( iframe.width.endsWith('%') || iframe.height.endsWith('%') ) ) {
    			// 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%';
    			// Check that height isn't more than the calculated max-height
    			if ( iframe.height < Math.round( parentWidth / proportion ).toString() ) {
    				iframe.style.maxHeight = Math.round( parentWidth / proportion ).toString() + 'px';
    			}
    		}
    	} );
    }

    Let me know and I’ll look to add it to Options for Twenty Twenty-One plugin.

    Oliver

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.