37 lines
1.1 KiB
JavaScript
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;
|