Jump to content

How to adjust banner video focal point/centre point?

Recommended Posts

Hi all,

I'm working on template switch to Brine and I have noticed that Banner images or video isn't centred.

On banner image I move dot(focal point) to the bottom but it still cuts out bottom the same is for banner video, it shows black bar of the video at the top and cuts Video at the bottom.

I have tried everything but no luck, I'm not a coder and desperately need CSS to move video up a little bit.

Thanks in advance

Screenshot 2019-11-12 at 08.13.56.jpg

Link to comment
  • Replies 4
  • Created
  • Last Reply

Squarespace sites are responsive. The aspect ratio of image and video banners is dependent on the user's screen dimensions and browser width.  

Typically you'll see the banner going from landscape to square and then to portrait as browser widths get smaller. 

You should think about it in the same way TV stations coped with the transition from 4:3 to 16:9 widescreen tvs. Editors used to work around the 'dead' areas where text would be cut off on a 4:3 screen and avoid having key action happening in those dead areas. 

For Squarespace to be as safe as possible the primary content should be in a central square on the video.  You should consider optimising for the most popular screen dimensions used by your visitors. 

Also, the black bars are typically used to fit wider screen video into a 16:9 broadcast video aspect ratio. With the web you're not restricted to 16:9 so you can crop the output in your video editing package to remove the black bars and render it at exactly the aspect ratio you need. 

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

Thanks for so detailed answer, I understand what you mean but this is not the problem that I have...

I've bean using Marquee template for many years and now I'm switching to Brine family and now the same Banner images and videos are out of centre.

There is focal point that you can move on banner image to show the point of interest that you like and no matter what device or screen size you are using it changes crop but focal point stays the same on all aspect ratios.

I don't mind black bars on video but here it shows just on top and on marquee it cuts out top and bottom and shows centre or on different window size shows on top and bottom but here it is always shows top.

On banner image when I move focal point at the bottom it will show bottom and crop the top but on Brine if I move focal point to the bottom it doesn't shows bottom of the image.

I don't know where the problem is but it would be helpful CSS Code for moving Banner little bit up...


Thanks and I hope that I have made it little bit more clear...

Link to comment

Tried already and it works but then I don't have Parallax anymore and this is not nice...

In Marquee Parallax effect is much much more visible than in Brine and all worked great but Brine crops out the bottom and I don't know why because Page content covers up banner from the bottom more and more and not the other way so there is no logical explanation... In Marquee sometimes when I move focal point to the top of the image it doesn't shows top of the image because of the effect (logical) but bottom always worked and on BRINE it doesn't...

Link to comment


This topic is now archived and is closed to further replies.

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