Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
dariokomazec

How to adjust banner video focal point/centre point?

Question

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

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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. 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

Try turning off parallax scrolling in Site Styles if it is enabled. 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...