Jump to content

Video Background Alignment Setting

Go to solution Solved by q_waffles,

Recommended Posts

My website opens with a video on the homepage that takes up much of the screen. Unfortunately, this background video is only center aligned, meaning it looks completely wack on screens outside of mobile or 16:9, such as on my ultrawide. 

Is there any way to change the background video's alignment setting? I'd much rather it be top aligned so the top doesn't get cut off. I've checked the other threads where you add CSS saying margin-top. I tried that, but it simply cuts off the top of the viewport of the video, cutting off even more of the top. 

I've attached a few screenshots on this behavior. One of the screenshots is from my ultrawide screen. You can see how badly the top of the video background is cut off. 


Screenshot 2024-06-29 135809.png

Screenshot 2024-06-29 135804.png

Screenshot 2024-06-29 135755.png

Link to comment
  • Replies 5
  • Views 271
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thanks for the reply, but this does not work. It makes the issue worse. 

The first image is what happens after I apply your code. It crops the top even more

Bottom image is before I applied the CSS. It still isn't ideal. Again, what I'm asking for is for the background video to be top aligned. I don't really understand what your code is doing, but it's not helping my issue



Link to comment
  • Solution

Ok, somehow managed to fix the problem myself! Thanks to this post

[INSERT YOUR SECTION ID HERE] .section-background video {
  object-position: 50% 0 !important;

First 50% controls X alignment, the 0 controls Y alignment. I set it to 0 here so that the video is top aligned. You can set it to 100% for the video to be bottom aligned, or any custom value. 

Remove the section ID bit and just go with .section-background video on the first line if you want all the backgrounds on your site to be aligned a certain way 

Replace video with img if your background is an image

Website works perfect now

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.