Fix responsive video embed previews. (#1921)

* Fix responsive video embed previews. Sets the height of video embeds dynamically. Tested with the following: * Short tweet: https://twitter.com/notnownikki/status/876229494465581056 * Tall tweet: https://twitter.com/PattyJenks/status/874034832430424065 * Youtube: https://www.youtube.com/watch?v=PfKUdmTq2MI * Photo: https://cloudup.com/cl3Oq5MU8Rm * Long tumblr post: http://doctorwho.tumblr.com/post/162052108791 * Custom HTML block
WordPress · Jul 26, 2017 · 2c1a6b7 · 2c1a6b7
1 parent b749af4
commit 2c1a6b7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -179,7 +179,9 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
 								<p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p>
 							</Placeholder>
 						) : (
-							<SandBox html={ html } title={ iframeTitle } />
+							<div className="wp-block-embed__wrapper">
+								<SandBox html={ html } title={ iframeTitle } type={ type } />
+							</div>
 						) }
 						{ ( caption && caption.length > 0 ) || !! focus ? (
 							<Editable

diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss
@@ -17,14 +17,14 @@
 		}
 	}
 
-	&.is-video > div:first-child {
+	&.is-video > .wp-block-embed__wrapper {
 		position: relative;
 		width: 100%;
 		height: 0;
-		padding-bottom: 56.25%; /* 16:9 */
+		padding-top: 56.25%; /* 16:9 */
 	}
 
-	&.is-video > div > iframe {
+	&.is-video > .wp-block-embed__wrapper > iframe {
 		position: absolute;
 		top: 0;
 		left: 0;

diff --git a/components/sandbox/index.js b/components/sandbox/index.js
@@ -69,6 +69,10 @@ export default class Sandbox extends wp.element.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;
@@ -82,7 +86,7 @@ export default class Sandbox extends wp.element.Component {
 					window.parent.postMessage( {
 						action: 'resize',
 						width: clientBoundingRect.width,
-						height: clientBoundingRect.height
+						height: ${ heightCalculation }
 					}, '*' );
 				}
 
@@ -120,14 +124,31 @@ export default class Sandbox extends wp.element.Component {
 				sendResize();
 		} )();`;
 
+		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;
+			}
+		`;
+
 		// put the html snippet into a html document, and then write it to the iframe's document
 		// we can use this in the future to inject custom styles or scripts
 		const htmlDoc = (
 			<html lang={ document.documentElement.lang }>
 				<head>
 					<title>{ this.props.title }</title>
+					<style dangerouslySetInnerHTML={ { __html: style } } />
 				</head>
-				<body data-resizable-iframe-connected="data-resizable-iframe-connected" style={ { margin: 0 } }>
+				<body data-resizable-iframe-connected="data-resizable-iframe-connected" className={ this.props.type }>
 					<div dangerouslySetInnerHTML={ { __html: this.props.html } } />
 					<script type="text/javascript" dangerouslySetInnerHTML={ { __html: observeAndResizeJS } } />
 				</body>