Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Set aspect ratio preserving CSS on embedded content with fixed size iframes #9500
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:
The first should have
Types of changes
referenced this pull request
Aug 31, 2018
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
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:
Note how the video has the additional
On the frontend, however, we get this:
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?
I think this should be in
I'll look at it now :)
This is exactly what I want to do!
@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,
Would you be able to fix those if you move the css over to
Behold, our magic at work:
Isn't that amazing? I think it's amazing. That's Twenty Seventeen, which has no concept of blocks.
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
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?
Alrighty, we have a class applied to embeds that have a fixed aspect ration,
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.
This works really nicely, great work
I've added a few minor comments.
Sep 7, 2018
This was referenced
Sep 10, 2018
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.
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.