Set aspect ratio preserving CSS on embedded content with fixed size iframes #9500

notnownikki · 2018-08-31T13:31:09Z

Description

To support the wide styles, we need to preserve the aspect ratio of fixed size embeds when they are resized to full width.

This applies a css class to embedded content that uses iframes (e.g. YouTube, Vimeo) to preserve aspect ratio.

How has this been tested?

Embed the following videos:

https://www.youtube.com/watch?v=XT13ijUfSts

https://www.youtube.com/watch?v=uAE6Il6OTcs

The first should have wp-embed-aspect-16-9 applied, and the second should have wp-embed-aspect-4-3.

Types of changes

Bug fix

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

jasmussen · 2018-09-04T11:25:32Z

Okay, I pushed some CSS to make videos responsive. It's good, but it's not perfect, which I'll get to in a second. Just a heads up, don't merge quite yet.

First off, the aspect ratios are solid, and I included the math in comments. See also this codepen: https://codepen.io/joen/pen/pOwoGV?editors=1100

The responsiveness works well because it doesn't require recalculating the embed widths, and is more performant. It also presumably is only applied to video where an aspect ratio is detected, which is perfect in other words.

This also works perfectly in the editor:

I also put this in a themes.scss file, as an "opinionated style". That means a theme has to opt into this. Your thoughts here are welcome, I'd be fine with moving it to style.scss as it's a nice feature to have for the stock offering. But for now I made it opt-in because it's rather big CSS, and a theme might want to do its own thing with the CSS classes made available.

However, and this is probably why the responsiveness was reverted or phased out since I last added it many moons ago: it doesn't work on the front-end when there are captions:

Why? Because due to how the responsiveness works, the video (and only the video) needs its own container which isn't an iframe.

This explains why it works in the editor, where the markup is — (largely, I sanitized a bit) — this:

<figure class="wp-block-embed-youtube wp-embed-aspect-16-9 wp-block-embed is-video">
	<div class="wp-block-embed__wrapper">
		<iframe ... />
	</div>
	<figcaption>Caption</figcaption>
</figure>

Note how the video has the additional wp-block-embed__wrapper.

On the frontend, however, we get this:

<figure class="wp-block-embed-youtube wp-embed-aspect-16-9 wp-block-embed is-video">
	<iframe ... />
	<figcaption>Caption</figcaption>
</figure>

That means we can't really use the responsive trick, because that will cover the caption.

@notnownikki Can you make it so that same wrapper that exists in the editor, exists on the frontend? Doesn't have to be for all embeds (but can be), just ones that need to be responsive (i.e. video). If you can do that, I can fix things up so the responsiveness is solid in both places.

Eventually if we can get this working, should we consider removing the onResize responsiveness that exists for embeds right now? The idea being that a CSS only solution might be more performant?

notnownikki · 2018-09-04T11:33:25Z

I also put this in a themes.scss file, as an "opinionated style". That means a theme has to opt into this. Your thoughts here are welcome, I'd be fine with moving it to style.scss as it's a nice feature to have for the stock offering.

I think this should be in style.scss so that no matter what the theme has as its content size, the embeds will always fit as they should.

Can you make it so that same wrapper that exists in the editor, exists on the frontend? Doesn't have to be for all embeds (but can be), just ones that need to be responsive (i.e. video).

I'll look at it now :)

Eventually if we can get this working, should we consider removing the onResize responsiveness that exists for embeds right now? The idea being that a CSS only solution might be more performant?

This is exactly what I want to do!

notnownikki · 2018-09-04T11:54:10Z

@jasmussen I added the wrapper div and added a block migration so that existing embeds will update when the posts are edited. There seem to be some lint issues with the new css though,

0] [2] packages/block-library/src/embed/theme.scss
[0] [2]  12:4   âœ–  Expected double colon pseudo-element notation   selector-pseudo-element-colon-notation
[0] [2]  29:24  âœ–  Expected double colon pseudo-element notation   selector-pseudo-element-colon-notation
[0] [2]  33:24  âœ–  Expected double colon pseudo-element notation   selector-pseudo-element-colon-notation
[0] [2]  37:24  âœ–  Expected double colon pseudo-element notation   selector-pseudo-element-colon-notation
[0] [2]  41:23  âœ–  Expected double colon pseudo-element notation   selector-pseudo-element-colon-notation
[0] [2]  45:23  âœ–  Expected double colon pseudo-element notation   selector-pseudo-element-colon-notation
[0] [2]  49:23  âœ–  Expected double colon pseudo-element notation   selector-pseudo-element-colon-notation
[0] [2]  53:23  âœ–  Expected double colon pseudo-element notation   selector-pseudo-element-colon-notation

Would you be able to fix those if you move the css over to style.scss?

jasmussen · 2018-09-04T12:16:50Z

Behold, our magic at work:

Isn't that amazing? I think it's amazing. That's Twenty Seventeen, which has no concept of blocks.

🤘

There seem to be some lint issues with the new css though,

I could swear I fixed those. They blocked my commit and I had to fix them before I could push. So I'm confused why they regressed. But I've fixed them again in 3720784

notnownikki · 2018-09-04T12:38:15Z

@jasmussen Last commit removes the aspect ratio preservation javascript from the sandbox. It's working brilliantly on the front end, but in the editor there's something throwing it off and I'm not sure what. If you embed a 16:9 video you'll see it's not as high as it needs to be in the editor. Perhaps the caption editable is overlapping somehow?

Note that this changes the sandbox component a little bit. We want to make sure that the changes we made here don't negatively affect other things that use the same component.

jasmussen · 2018-09-04T13:45:41Z

Okay I pushed a fix:

However as noted in the commit note, I had to make a change to the sandbox component in order to make this work. But I'm not sure where else that component is being made — for example if it's being used for embeds that are not supposed to be responsive, the height property I added is undesirable. Do we have a way to scope this a bit so only videos receive the height stuff?

jasmussen · 2018-09-04T13:47:40Z

packages/components/src/sandbox/index.js

 			body > div > iframe {
 				width: 100%;
+				height: 100%;


Note that this height property is necessary in order for the responsiveness to work, basically because every element that contains the embed needs an explicit height in order for a single percentage height to work properly.

But if this component is used for things that aren't aspect ratio responsive, we need to scope it. Something like:

html.is-video, html.is-video body, html.is-video body > div, html.is-video body > div > iframe { height: 100%; }

Ah, I see :) Ok, I'll see how it can be changed around to only get applied to things we're doing aspect ratio preservation on.

Feel free to send this PR right back at me if we can have a CSS class or separate style declaration for aspect ratio responsive stuff only.

It would be cool to have an .is-responsive or .has-aspect-ratio class to target here.

Agreed. I was thinking .wp-embed-has-aspect-ratio and then the editor should be able to use that to apply the height to the sandbox iframe.

notnownikki · 2018-09-04T14:25:06Z

Alrighty, we have a class applied to embeds that have a fixed aspect ration, wp-has-aspect-ratio. That gets applied to the type of the Sandbox component, so the CSS inside the sandbox can apply the height fix to content that needs it for the aspect ratio.

Test by embedding videos with different aspect ratios, and a tweet to test normal content, because the new behaviour should only depend on their being an iframe with fixed dimensions, and not the content type.

jasmussen · 2018-09-04T14:29:00Z

packages/components/src/sandbox/index.js

@@ -142,6 +142,11 @@ class Sandbox extends Component {
 			body > div,
 			body > div > iframe {
 				width: 100%;
+			}


Gloriously done. I haven't tested, but based on looking at the code this should work. 👍 👍

jasmussen · 2018-09-06T09:07:09Z

If this is ready for review, would you mind extending the review range to for example gutenberg-core, and perhaps assigning a 3.9 milestone?

talldan

This works really nicely, great work 😁

I've added a few minor comments.

talldan · 2018-09-07T09:33:24Z

packages/block-library/src/embed/index.js

@@ -136,6 +136,28 @@ export function getEmbedEdit( title, icon ) {
 			return false;
 		}

+		/**
+		 * Finds the first iframe with a width and height and returns


Few minor things about the doc block.

Should it read 'or an empty object if there is no iframe with width and height.'?

My understanding is there should be a line separating the function description from the params.

The param description should be capitalised -> 'The preview HTML'

Typo in the param description - 'possible' -> 'possibly

talldan · 2018-09-07T09:39:13Z

packages/block-library/src/embed/index.js

+		 * @param {string} html the preview HTML that possible contains an iframe with width and height set.
+		 * @return {Object} Object with extracted height and width if available.
+		 */
+		getiFrameHeightWidth( html ) {


I think this could be camel-cased as Iframe instead of iFrame. It looks like there's a FocusableIframe component in the codebase so would be good to be consistent in terms of case.

talldan · 2018-09-07T09:50:52Z

packages/block-library/src/embed/index.js

+		getiFrameHeightWidth( html ) {
+			const previewDom = document.createElement( 'div' );
+			previewDom.innerHTML = html;
+			const walker = document.createTreeWalker( previewDom );


I might be wrong, but I think it should be possible to simplify this to something like:

const iframe = previewDom.querySelector( 'iframe' ); if ( iframe ) { return { height: iframe.height, width: iframe.width, }; }

talldan · 2018-09-07T10:01:37Z

packages/block-library/src/embed/index.js

+			// calculate the aspect ratio and set an extra css class so that the rendered
+			// content keeps the correct height no matter how wide the block is set to be.
+			const { height, width } = this.getiFrameHeightWidth( html );
+			if ( undefined !== height && undefined !== width ) {


I wonder if most of this logic could be moved into getIframeHeightWidth and that could become getAspectRatioClassName so that setAttributesFromPreview isn't doing so much. Or they could be separate functions.

talldan · 2018-09-07T10:03:56Z

packages/block-library/src/embed/index.js

+
+				if ( aspectRatioClassName ) {
+					aspectRatioClassName += ' wp-has-aspect-ratio';
+					const className = classnames( this.props.attributes.className, aspectRatioClassName );


Could avoid the concatenation here by making classnames do the work:

const className = classnames( this.props.attributes.className, 'wp-has-aspect-ratio', aspectRatioClassName );

talldan · 2018-09-07T10:26:05Z

packages/block-library/src/embed/index.js

@@ -218,6 +281,7 @@ export function getEmbedEdit( title, icon ) {
 			const cannotPreview = includes( HOSTS_NO_PREVIEWS, parsedUrl.host.replace( /^www\./, '' ) );
 			// translators: %s: host providing embed content e.g: www.youtube.com
 			const iframeTitle = sprintf( __( 'Embedded content from %s' ), parsedUrl.host );
+			const sandboxClassnames = className ? type + ' ' + className : type;


Could use classnames again here, as it'll ignore className when its undefined:

const sandboxClassnames = classnames( type, className );

notnownikki · 2018-09-07T10:44:26Z

@talldan thank you! I'll make all those changes. querySelector has slipped my mind and it would do exactly what we need.

notnownikki · 2018-09-07T11:20:48Z

Ok, think I fixed all those points. I moved all of the aspect ratio CSS code into maybeSetAspectRatioClassName.

talldan · 2018-09-07T13:46:44Z

Looks good to me. Thanks for making those changes. Looks like codecov has failed, not sure what can be done about that.

aduth · 2018-09-10T20:02:40Z

packages/block-library/src/embed/index.js

+		 * @param {string} html The preview HTML that possibly contains an iframe with width and height set.
+		 */
+		maybeSetAspectRatioClassName( html ) {
+			const previewDom = document.createElement( 'div' );


Minor: DOM is an acronym and as such should be capitalized as previewDOM (reference)

aduth · 2018-09-10T20:05:55Z

packages/components/src/sandbox/index.js

@@ -176,7 +158,7 @@ class Sandbox extends Component {
 		// 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 }>
+			<html lang={ document.documentElement.lang } className={ this.props.type }>


What is the type prop meant to represent?

it's the type that the oembed response contains, it was meant for styling video and image content differently, however I'm not sure it's actually used any more.

aduth · 2018-09-10T20:13:24Z

packages/block-library/src/embed/index.js

+		 */
+		maybeSetAspectRatioClassName( html ) {
+			const previewDom = document.createElement( 'div' );
+			previewDom.innerHTML = html;


I am very wary of the security implications of this line. This will allow JavaScript in the preview markup to be evaluated, even though we're never including it in the DOM. As a demonstration, paste the following into your console while viewing the editor:

document.createElement( 'div' ).innerHTML = '<img src=/ onerror=\'alert("haxd")\'>'

Now it's a question as to whether we consider embed preview markup to be "safe". Given that the Sandbox component exists, I'm operating on the assumption that the answer is no. Therefore, this is a security vulnerability if it comes to be released.

Previously: #1334 (comment) (not as fun as it was previously since Photobucket appears to have since let their oEmbed API languish and die)

Looking at this now. It might have to be a regular expression that picks out the iframes, so we avoid creating actual elements.

Changed this to use a regex in #9770

Another simpler option might be document.implementation.createHTMLDocument as a "sandbox" of sorts.

Example: https://github.com/aduth/hpq/blob/f17b3fdc9c5692e9f676f94c33a003d191c81bd6/src/index.js#L21-L23

aduth · 2018-09-14T18:47:36Z

The demo content should have been updated here. While the deprecation migration saves it from being flagged as invalid, it does cause the demo post to trigger an autosave after delay.

validation.js:150 Block validation: Block validation failed for `core-embed/vimeo` ({name: "core-embed/vimeo", title: "Vimeo", description: "Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.", icon: {…}, category: "embed", …}).

Expected:

<figure class="wp-block-embed-vimeo alignwide wp-block-embed is-type-video is-provider-vimeo"><div class="wp-block-embed__wrapper">
https://vimeo.com/22439234
</div></figure>

Actual:

<figure class="wp-block-embed-vimeo wp-block-embed alignwide is-type-video is-provider-vimeo">https://vimeo.com/22439234</figure>

chrisvanpatten · 2018-09-23T22:01:07Z

There's a report in #10109 about this CSS causing a conflict with a theme that's doing its own responsive video handling.

It's only in one theme so far (that we know of) so maybe just something the theme dev needs to patch, but if there's a more widespread practice of themes including some kind of responsive video functionality, it may be worth revisiting a way to make this more robust or opt-in.

Set aspect ratio preserving CSS on previews with fixed size iframes

9255d29

notnownikki added the [Status] In Progress Tracking issues with work in progress label Aug 31, 2018

notnownikki self-assigned this Aug 31, 2018

notnownikki mentioned this pull request Aug 31, 2018

Can't style embedded videos properly due to inline width & height #8383

Closed

Add aspect ratio CSS.

5baab35

Add embed wrapper div in saved content for responsive classes

fdfa437

Fix things up.

3720784

Remove the aspect ratio preservation from sandbox

a81372e

notnownikki and others added 2 commits September 4, 2018 13:54

Fix embed tests

f75ac26

Fix for responsiveness in the editor also.

6ed5c58

Note that this changes the sandbox component a little bit. We want to make sure that the changes we made here don't negatively affect other things that use the same component.

jasmussen reviewed Sep 4, 2018

View reviewed changes

notnownikki added 2 commits September 4, 2018 15:14

Fix height for video sandboxing

27c15c7

Make the aspect ratio generic again

ea6d484

jasmussen reviewed Sep 4, 2018

View reviewed changes

notnownikki removed the [Status] In Progress Tracking issues with work in progress label Sep 6, 2018

notnownikki requested a review from a team September 6, 2018 09:09

notnownikki added this to the 3.9 milestone Sep 6, 2018

talldan requested changes Sep 7, 2018

View reviewed changes

Fix review points

037607d

talldan approved these changes Sep 7, 2018

View reviewed changes

notnownikki merged commit 8d46362 into master Sep 7, 2018

youknowriad deleted the update/embed-responsive-iframed-content branch September 7, 2018 13:52

notnownikki changed the title ~~Set aspect ratio preserving CSS on previews with fixed size iframes~~ Set aspect ratio preserving CSS on embedded content with fixed size iframes Sep 7, 2018

aduth reviewed Sep 10, 2018

View reviewed changes

This was referenced Sep 10, 2018

Use regex to extract iframe width and height #9770

Closed

Use HTML Document for finding iframe in embed previews #9827

Merged

aduth mentioned this pull request Sep 14, 2018

Testing: Add E2E test to verify demo errors #9924

Merged

eri-trabiccolo mentioned this pull request Sep 24, 2018

Hueman video embedded and Gutenberg responsive embeds compatibility issue presscustomizr/hueman#698

Closed

fabiankaegy mentioned this pull request Oct 17, 2018

Video embed issues WordPress/twentynineteen#107

Closed

designsimply mentioned this pull request Nov 28, 2018

Youtube/Vimeo Video insert isn´t responsive #9211

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Set aspect ratio preserving CSS on embedded content with fixed size iframes #9500

Set aspect ratio preserving CSS on embedded content with fixed size iframes #9500

notnownikki commented Aug 31, 2018

jasmussen commented Sep 4, 2018

notnownikki commented Sep 4, 2018

notnownikki commented Sep 4, 2018

jasmussen commented Sep 4, 2018

notnownikki commented Sep 4, 2018

jasmussen commented Sep 4, 2018

jasmussen Sep 4, 2018

notnownikki Sep 4, 2018

jasmussen Sep 4, 2018

chrisvanpatten Sep 4, 2018

notnownikki Sep 4, 2018

notnownikki commented Sep 4, 2018

jasmussen Sep 4, 2018

jasmussen commented Sep 6, 2018

talldan left a comment

talldan Sep 7, 2018

talldan Sep 7, 2018 •

edited

Loading

talldan Sep 7, 2018

talldan Sep 7, 2018

talldan Sep 7, 2018

talldan Sep 7, 2018

notnownikki commented Sep 7, 2018

notnownikki commented Sep 7, 2018

talldan commented Sep 7, 2018

aduth Sep 10, 2018

aduth Sep 10, 2018

notnownikki Sep 10, 2018

aduth Sep 10, 2018

aduth Sep 10, 2018

notnownikki Sep 10, 2018

notnownikki Sep 10, 2018

aduth Sep 11, 2018

aduth commented Sep 14, 2018

chrisvanpatten commented Sep 23, 2018

Set aspect ratio preserving CSS on embedded content with fixed size iframes #9500

Set aspect ratio preserving CSS on embedded content with fixed size iframes #9500

Conversation

notnownikki commented Aug 31, 2018

Description

How has this been tested?

Types of changes

Checklist:

jasmussen commented Sep 4, 2018

notnownikki commented Sep 4, 2018

notnownikki commented Sep 4, 2018

jasmussen commented Sep 4, 2018

notnownikki commented Sep 4, 2018

jasmussen commented Sep 4, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

notnownikki commented Sep 4, 2018

Choose a reason for hiding this comment

jasmussen commented Sep 6, 2018

talldan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan Sep 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

notnownikki commented Sep 7, 2018

notnownikki commented Sep 7, 2018

talldan commented Sep 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth commented Sep 14, 2018

chrisvanpatten commented Sep 23, 2018

talldan Sep 7, 2018 •

edited

Loading