/**

[0] Fix | Delete

* File responsive-embeds.js.

[1] Fix | Delete

*

[2] Fix | Delete

* Make embeds responsive so they don't overflow their container.

[3] Fix | Delete

*/

[4] Fix | Delete

[5] Fix | Delete

/**

[6] Fix | Delete

* Add max-width & max-height to <iframe> elements, depending on their width & height props.

[7] Fix | Delete

*

[8] Fix | Delete

* @since Twenty Twenty-One 1.0

[9] Fix | Delete

*

[10] Fix | Delete

* @return {void}

[11] Fix | Delete

*/

[12] Fix | Delete

function twentytwentyoneResponsiveEmbeds() {

[13] Fix | Delete

var proportion, parentWidth;

[14] Fix | Delete

[15] Fix | Delete

// Loop iframe elements.

[16] Fix | Delete

document.querySelectorAll( 'iframe' ).forEach( function( iframe ) {

[17] Fix | Delete

// Only continue if the iframe has a width & height defined.

[18] Fix | Delete

if ( iframe.width && iframe.height ) {

[19] Fix | Delete

// Calculate the proportion/ratio based on the width & height.

[20] Fix | Delete

proportion = parseFloat( iframe.width ) / parseFloat( iframe.height );

[21] Fix | Delete

// Get the parent element's width.

[22] Fix | Delete

parentWidth = parseFloat( window.getComputedStyle( iframe.parentElement, null ).width.replace( 'px', '' ) );

[23] Fix | Delete

// Set the max-width & height.

[24] Fix | Delete

iframe.style.maxWidth = '100%';

[25] Fix | Delete

iframe.style.maxHeight = Math.round( parentWidth / proportion ).toString() + 'px';

[26] Fix | Delete

}

[27] Fix | Delete

} );

[28] Fix | Delete

}

[29] Fix | Delete

[30] Fix | Delete

// Run on initial load.

[31] Fix | Delete

twentytwentyoneResponsiveEmbeds();

[32] Fix | Delete

[33] Fix | Delete

// Run on resize.

[34] Fix | Delete

window.onresize = twentytwentyoneResponsiveEmbeds;

[35] Fix | Delete

[36] Fix | Delete