https://www.feedspace.io/blogs/wp-content/themes/twentytwentyone/assets/js/responsive-embeds.js?ver=1.0.0

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 */
14function 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.
33twentytwentyoneResponsiveEmbeds();
34
35// Run on resize.
36window.onresize = twentytwentyoneResponsiveEmbeds;