WordPress/wp-content/themes/twentytwentyone/assets/js/responsive-embeds.js
desrosj 6daeadb85e Twenty Twenty-One: Correct @since inline documentation tags.
Previously, `1.0.0` was used for the version. This is inconsistent with the versioning used in the other default themes, which use use X.X and not X.X.X.

This change corrects all `1.0.0` occurrences to `1.0`, and adds the additional context of `Twenty Twenty-One` to avoid confusion with `WordPress 1.0`.

Props SergeyBiryukov, poena.
Fixes #51958.
Built from https://develop.svn.wordpress.org/trunk@49826


git-svn-id: http://core.svn.wordpress.org/trunk@49545 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-12-17 14:57:07 +00:00

37 lines
1.1 KiB
JavaScript

/**
* File responsive-embeds.js.
*
* Make embeds responsive so they don't overflow their container.
*/
/**
* Add max-width & max-height to <iframe> elements, depending on their width & height props.
*
* @since Twenty Twenty-One 1.0
*
* @return {void}
*/
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';
}
} );
}
// Run on initial load.
twentytwentyoneResponsiveEmbeds();
// Run on resize.
window.onresize = twentytwentyoneResponsiveEmbeds;