Skip to content

Commit

Permalink
Update: Keep ratio on cover video backgrounds (#11886)
Browse files Browse the repository at this point in the history
## 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)
  • Loading branch information
jorgefilipecosta authored Nov 15, 2018
1 parent 2610238 commit e2d08a4
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion packages/block-library/src/cover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;

&.has-left-content {
justify-content: flex-start;
Expand Down Expand Up @@ -104,5 +105,5 @@
width: 100%;
height: 100%;
z-index: z-index(".wp-block-cover__video-background");
object-fit: fill;
object-fit: cover;
}

0 comments on commit e2d08a4

Please sign in to comment.