Make any iframe embed responsive in the editor

We used to reply on oEmbed's type information to make
YouTube embeds responsive in the editor. This change
removes that dependency, and looks for content embedded
in an iframe with a fixed size, and resizes it keeping
the same aspect ratio.

blocks/library/embed/editor.scss

@@ -16,19 +16,4 @@
 			font-size: $default-font-size;
 		}
 	}
-
-	&.is-video > .wp-block-embed__wrapper {
-		position: relative;
-		width: 100%;
-		height: 0;
-		padding-top: 56.25%; /* 16:9 */
-	}
-
-	&.is-video > .wp-block-embed__wrapper > iframe {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-	}
 }

components/sandbox/index.js

@@ -82,24 +82,34 @@ export default class Sandbox extends Component {
 			return;
 		}
 
-		// sandboxing video content needs to explicitly set the height of the sandbox
-		// based on a 16:9 ratio for the content to be responsive
-		const heightCalculation = 'video' === this.props.type ? 'clientBoundingRect.width / 16 * 9' : 'clientBoundingRect.height';
-
 		const observeAndResizeJS = `
 			( function() {
 				var observer;
+				var aspectRatio = false;
+				var iframe = false;
 
 				if ( ! window.MutationObserver || ! document.body || ! window.parent ) {
 					return;
 				}
 
 				function sendResize() {
 					var clientBoundingRect = document.body.getBoundingClientRect();
+					var height = aspectRatio ? Math.ceil( clientBoundingRect.width / aspectRatio ) : clientBoundingRect.height;
+
+					if ( iframe && aspectRatio ) {
+						// This is embedded content delivered in an iframe with a fixed aspect ratio,
+						// so set the height correctly and stop processing. The DOM mutation will trigger
+						// another event and the resize message will get posted.
+						if ( iframe.height != height ) {
+							iframe.height = height;
+							return;
+						}
+					}
+
 					window.parent.postMessage( {
 						action: 'resize',
 						width: clientBoundingRect.width,
-						height: ${ heightCalculation }
+						height: height,
 					}, '*' );
 				}
 
@@ -135,19 +145,31 @@ export default class Sandbox extends Component {
 				document.body.style.width = '100%';
 				document.body.setAttribute( 'data-resizable-iframe-connected', '' );
 
+				// Make embedded content in an iframe with a fixed size responsive,
+				// keeping the correct aspect ratio.
+				var potentialIframe = document.body.children[0];
+				if ( 'DIV' === potentialIframe.tagName || 'SPAN' === potentialIframe.tagName ) {
+					potentialIframe = potentialIframe.children[0];
+				}
+				if ( 'IFRAME' === potentialIframe.tagName ) {
+					if ( potentialIframe.width ) {
+						iframe = potentialIframe;
+						aspectRatio = potentialIframe.width / potentialIframe.height;
+						potentialIframe.width = '100%';
+					}
+				}
+
 				sendResize();
+
+				// Resize events can change the width of elements with 100% width, but we don't
+				// get an DOM mutations for that, so do the resize when the window is resized, too.
+				window.addEventListener( 'resize', sendResize, true );
 		} )();`;
 
 		const style = `
 			body {
 				margin: 0;
 			}
-			body.video,
-			body.video > div,
-			body.video > div > iframe {
-				width: 100%;
-				height: 100%;
-			}
 			body > div > * {
 				margin-top: 0 !important;	/* has to have !important to override inline styles */
 				margin-bottom: 0 !important;