Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.Sign up
GitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Use best fitting embed aspect ratio if exact match doesn't exist #10213
This picks the best fit of the common aspect ratios if an exact fit does not appear in our list, for responsive content.
Fixes: #8383 (comment)
How has this been tested?
Embed https://www.youtube.com/watch?v=XT13ijUfSts and check it has the 16-9 style.
Embed https://www.youtube.com/watch?v=uAE6Il6OTcs and check it has the 4-3 style.
Embed https://vimeo.com/139290912 and check it has the 21-9 style.
Embed https://vimeo.com/139290912 again in the same post, and check the new embed has the 21-9 style.
Types of changes
Bug fix (non-breaking change which fixes an issue)
This is great! It works well. Twenty Seventeen front:
However that above is after a reload. There seems to be an issue with the Vimeo video where the 2nd and 3rd time you embed it, it's not properly sized:
I did a little inspecting, and as it turns out, the 2nd and 3rd vimeo embed is correctly identified same as the first one. However the right classes are not applied. Compare, this is the
Now compare with the
Note how the first one has all these CSS classes:
the 2nd and 3rd one only has this one:
Note that if you save the post, then reload, evertything is fine, as you can see in the first screenshot. The missing classes happen only on the first edit. The important CSS class we need to have is
Any idea why the classes go missing the first time but appear after a reload?
Yeah, it's just that there are a number of issues with React components and the type of data updating we do here. I'm considering a refactor to make the edit component very simple, and move most of the logic into the part where we select the data from the store. But, looking at this now.
Fix for the issue is in another PR, which currently has a conflict with master and so can't be reviewed and merged. I'll fix that PR, but there's nothing we can do in this one to fix the issue, it's to do with passing around attributes when the embed block changes type (which happens when you paste a URL) and there's a refactor in #10035 to fix that.
tofumatt left a comment
Code seems fine, just comments about the loop used and function names, but just ping me if my comments are unclear. If they make sense feel free to modify+merge
There's talk of issues here but they're resolved in other PRs so if the UX here is better by @jasmussen I'm cool with the code.
If we know for sure it's a video, then it needs SOME aspect ratio, all videos have them. If the video element behaved like an img, the height would be intrinsically applied.
We use this detected aspect ratio to apply a padding that's relatively easily calculated from the dimensions. So as an alternative to css classes we could apply this padding inline. But in the past, inline styles have caused headaches with themes, which is why we went this route.