Background video object-position

Design help General
1

Hi there,

I’m trying to right-align a background video in a hero section. So that if the browser is resized, it keeps the video on the right-hand side and things only get cropped on the left-side.

Here’s a quick video I made:
https://drive.google.com/file/d/1OB-PO9FLlSCAGOU_B9IV_FvhN7OOJN1l/view?usp=sharing

I’ve recreated my issue on a blank page. I’d like to achieve that the background video acts the same as the image is acting: object-fit:cover; object-position: 100%, 50%;.

Thanks,
Nicolas

Here is my site Read-Only link.

2

Here are the steps I followed to get this working like the image:

  1. Wrap the background video in a div and add the position-right class to it
  2. Set the position-right div’s position to relative
  3. Remove the position-right class from the background video
  4. Add a fixed width to the video (1920px width and 100% height)
  5. Set the position of the background video to absolute with the left set to Auto and all other sides set to 0%.
    image

Let me know if this works for you

3

Thank you so much. Works like a charm!