Video Block: Full screen video may be cropped

[sirreal]

Description

When expanded to fullscreen, video blocks with poster images expand to cover. This overrides the default sizing of contain.

This is caused by these lines:

https://github.com/WordPress/gutenberg/blob/a750125b0210b9d906efcec2d807477590e4412f/packages/block-library/src/video/style.scss#L9-L13

Unfortunately, this targets the video element itself, regardless of whether the poster is shown. I noticed problems in fullscreen, but there may be other issues.

I'll share a possible fix for fullscreen videos at least:

diff --git before/packages/block-library/src/video/style.scss after/packages/block-library/src/video/style.scss
index 06c0dfd9cd..e9c7e063c2 100644
--- before/packages/block-library/src/video/style.scss
+++ after/packages/block-library/src/video/style.scss
@@ -1,6 +1,7 @@
 .wp-block-video {
    // This block has customizable padding, border-box makes that more predictable.
    box-sizing: border-box;
+
    video {
        width: 100%;
        vertical-align: middle;
@@ -12,6 +13,12 @@
        }
    }

+   @supports (selector(video:fullscreen)) {
+       video:fullscreen {
+           object-fit: contain;
+       }
+   }
+
    &.aligncenter {
        text-align: center;
    }

Step-by-step reproduction instructions

I noticed this on the WordPress 6.7 release page.

• Visit the page
• Play the "Introducing Twenty Twenty-Five" video
• Click fullscreen

Depending on screen dimensions, the video may be cropped.

Screenshots, screen recording, code snippet

Current behavior	Full video (no crop)

Environment info

WordPress 6.7 Chrome 131

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [ ] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[himanshupathak95]

Hey @sirreal,

I was able to reproduce the same issue and can confirm that the issue was resolved when I applied the patch provided -

    @supports (position: sticky) {
        [poster] {
            object-fit: contain;
        }
    }

With object-fit: cover;

https://github.com/user-attachments/assets/93e2a4a2-c7c0-4e48-8081-d3611c18c5dd

With object-fit: contain;

https://github.com/user-attachments/assets/15e83b02-9f0b-4c83-8783-ce70cedbee8f