From 2c1a6b7ba5636fbe45420097a40b660a027b6c03 Mon Sep 17 00:00:00 2001 From: Nicola Heald Date: Wed, 26 Jul 2017 10:35:20 +0100 Subject: [PATCH] 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 --- blocks/library/embed/index.js | 4 +++- blocks/library/embed/style.scss | 6 +++--- components/sandbox/index.js | 25 +++++++++++++++++++++++-- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js index 7c74a7f097b57..4fc1f55328685 100644 --- a/blocks/library/embed/index.js +++ b/blocks/library/embed/index.js @@ -179,7 +179,9 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {

{ __( 'Previews for this are unavailable in the editor, sorry!' ) }

) : ( - +
+ +
) } { ( caption && caption.length > 0 ) || !! focus ? ( 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 index f78982c8bafb8..9268b09444515 100644 --- 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 = ( { this.props.title } +