Cover: Video - Add position controls

[ItsJonQ]

At the moment, the horizontal and vertical background positioning controls only work for Cover images. Cover videos lack this feature.

I think it would be helpful to add feature parity with video backgrounds.

To achieve the same positioning MATH, <video /> styles can use object-position.

This will also give as an opportunity to improve the FocalPointPicker component a bit.

I've done some explorations! I've added couple of enhancements, including adding our new UnitControl components as well as a Grid overlay. It feels really nice!

Note: This does not work on IE 11. However, video backgrounds already use object-fit: cover. So this update should not introduce a regression on IE 11.

[mtias]

This is great. I think the grid should always show up while you drag instead of being a toggle.

[ItsJonQ]

@mtias Oh interesting!!! That makes it easier. We can do that ❤️ !

[ItsJonQ]

@mtias Aww yiss!

(Also in the demo, pressing keyboard arrows to adjust position. Shift jumping is supported)

[jasmussen]

Looks amazing, Q! Here's a visual tweak to the field:

What do you think?

[ItsJonQ]

@jasmussen Sure thing! I can give it a shot ✨

I opened a draft PR:
#22531

We can collab and iterate there 😊

Since we're working on this component... I think it would be a good opportunity to explore any UI/UX ideas.

The "wouldn't it be cool if..." ones.

I think the 9x9 grid as a good example of this. Made better by @mtias 's interaction suggestion