Background video object-position

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:

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%;.


Here is my site Read-Only link.

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%.

Let me know if this works for you

Thank you so much. Works like a charm!