SOLVED: Video is cropped in fullscreen mode

Binu · January 1, 2026, 7:33pm

Browser: Google Chrome
OS: macOS
Builder: Bricks
Element: Video

Description

When using the Video element in Bricks, the video is cropped in fullscreen mode because Bricks applies object-fit: cover by default.

object-fit: cover
Works correctly in normal view
Crops the video in fullscreen
object-fit: contain
Fixes fullscreen cropping
Breaks the normal view layout

This occurs because the browser’s default fullscreen rule:

:not(:root):fullscreen {
  object-fit: contain;
}

is overridden by Bricks’ Video element styles:

.where(.brxe-video) video {
  object-fit: cover;
}

Expected Behavior

Normal view uses object-fit: cover
Fullscreen mode respects object-fit: contain
Video should not be cropped in fullscreen

Actual Behavior

Bricks overrides the browser fullscreen rule
Video remains object-fit: cover in fullscreen
Video is cropped

Temporary Workaround

.where(.brxe-video) video:fullscreen {
  object-fit: contain !important;
}

Matej · January 5, 2026, 6:59am

Hi @Binu,

can you share a video how to replicate the issue? Ideally, you can also copy-paste the video element, so I check it locally as well.

Thank you,
Matej

Binu · January 5, 2026, 12:53pm

Hi Matej,

Thanks for taking a look at this

Here are the steps to replicate the issue:

Add a Video element
Add a source media
Use any video where you can clearly see whether the video is being cropped or not

That’s it.

On the frontend , when the video plays normally, it looks correct.
However, when switching to fullscreen , the video still uses object-fit: cover , which causes it to be cropped.

Google Drive link for reference.

Thanks,
Binu

Matej · January 6, 2026, 7:09am

Hi @Binu,

Thank you for the additional information. I was checking a YouTube video, so that’s why I was confused. I was able to replicate the issue, and I’ve added it to our internal bug tracker.

Thank you,
Matej

timmse · February 3, 2026, 9:32am

We fixed this issue in Bricks 2.2 RC2, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any pre-stable release, please do not use it on a production website. It is intended for testing in a local or staging environment only.

sermalefico · February 9, 2026, 11:28am

This is no fixed inside the widget and the front end. When go to full screen in front end the css is :where(.brxe-video) video {
object-fit: cover;
}

not “contain”

Matej · February 9, 2026, 11:53am

Can you give me an example/link? The video is not cut off on my end anymore?

Thanks,
Matej

sermalefico · February 9, 2026, 12:16pm

My video is vertical
https://adrianarcay.com/portfolio/bou-de-vara/

Matej · February 9, 2026, 1:17pm

Hey @sermalefico,

are you sure you are on the Bricks 2.2 RC2 version? Because the selector should look different now. If you are, make sure to clear all cache.

video[poster]:not([data-is-loaded]) {
		object-fit: cover;
	}

Let me know please.
Matej

sermalefico · February 9, 2026, 1:57pm

i dont use video poster. and yes is RC2, the problem is in the video tag you can download the vertical video from the url and try with video widget, then click in the full screen icon of the video.

sermalefico · February 9, 2026, 2:09pm

Oh, I’m so sorry! It’s true, I didn’t have the RC2! My sincerest apologies! It works!

Matej · February 9, 2026, 3:36pm

Hi @sermalefico,

thank you for your response. I’m happy that you figured it out and that it’s solved in RC2

Best regards,
Matej