From e2d08a4810ca520ab5ca383af4041e7eac230bfd Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 15 Nov 2018 15:51:54 +0000 Subject: [PATCH] Update: Keep ratio on cover video backgrounds (#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) --- packages/block-library/src/cover/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 294118094ed84b..3ef5a402056b09 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -10,6 +10,7 @@ display: flex; justify-content: center; align-items: center; + overflow: hidden; &.has-left-content { justify-content: flex-start; @@ -104,5 +105,5 @@ width: 100%; height: 100%; z-index: z-index(".wp-block-cover__video-background"); - object-fit: fill; + object-fit: cover; }