New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update: Keep ratio on cover video backgrounds #11886

Merged
merged 1 commit into from Nov 15, 2018

Conversation

Projects
None yet
5 participants
@jorgefilipecosta
Member

jorgefilipecosta commented Nov 15, 2018

Description

This PR updates cover block to use object-fit cover instead of object-fit fill for the video background.
This change will make sure the ratio of the video is always kept.
The downside is that part of the video may be cropped to make sure it fills the background, and its ratio is kept.

How has this been tested?

Verify the cover block still works as before.
Verify the ratio of the video is always kept (by resizing the window) in the frontend and it the editor.

Screenshots

After:
nov-15-2018 00-02-22
Before:
nov-15-2018 00-07-48

@jorgefilipecosta jorgefilipecosta requested a review from mtias Nov 15, 2018

@jorgefilipecosta jorgefilipecosta changed the title from Update: Keep ratio on cover video backgrounds. to Update: Keep ratio on cover video backgrounds Nov 15, 2018

@jorgefilipecosta jorgefilipecosta added this to the 4.4 milestone Nov 15, 2018

@@ -10,6 +10,7 @@
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;

This comment has been minimized.

@mtias

mtias Nov 15, 2018

Contributor

Why is this needed for both image and video?

This comment has been minimized.

@jorgefilipecosta

jorgefilipecosta Nov 15, 2018

Member

This is only needed for the videos. But it does not affect the images or changes anything if also applied to images. We don't have a way in CSS to target a class if it contains a specific child e.g: a video, so I applied to both images and video.

@youknowriad youknowriad modified the milestones: 4.4, 4.5 Nov 15, 2018

@mtias mtias modified the milestones: 4.5, 4.4 Nov 15, 2018

@karmatosed karmatosed self-requested a review Nov 15, 2018

@karmatosed

This comment has been minimized.

Member

karmatosed commented Nov 15, 2018

This to me makes sense. My only wonder is cross browser support but a cautious look seems 👍

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 15, 2018

This works for me in my testing. I can confirm that the aspect ratio before was skewed, and it isn't anymore. The extra crop is fine.

I was concerned the added overflow rule would make the sticky toolbars not work — it has done so in the past. But the sticky toolbar works fine here, so the scope for the rule is good.

👍 👍

@youknowriad

LGTM 👍

@jorgefilipecosta jorgefilipecosta merged commit e2d08a4 into master Nov 15, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jorgefilipecosta jorgefilipecosta deleted the update/keep-ratio-on-cover-video-backgrounds branch Nov 15, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Update: Keep ratio on cover video backgrounds (WordPress#11886)
## Description
This PR updates cover block to use object-fit cover instead of object-fit fill for the video background.
This change will make sure the ratio of the video is always kept.
The downside is that part of the video may be cropped to make sure it fills the background, and its ratio is kept.


## How has this been tested?
Verify the cover block still works as before.
Verify the ratio of the video is always kept (by resizing the window) in the frontend and it the editor.

## Screenshots
After:
![nov-15-2018 00-02-22](https://user-images.githubusercontent.com/11271197/48521151-2e41a980-e86b-11e8-9744-43a60da65900.gif)
Before:
![nov-15-2018 00-07-48](https://user-images.githubusercontent.com/11271197/48521160-34378a80-e86b-11e8-901f-19dd583d856e.gif)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment