mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-29 20:47:45 +01:00
87b6c253b5
For a full list of changes since beta 1, see 9e34dca...e580895.
Props poena, melchoyce, luminuu, aristath, justinahinon, jffng, ryelle, kishanjasani, rolfsiebers.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49320
git-svn-id: http://core.svn.wordpress.org/trunk@49081 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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 1.0.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;
|