Jump to content

How to make border flush with video (change aspect ratio?)

Go to solution Solved by melody495,

Recommended Posts

Hello! I'm trying to add borders to the videos on my site and am running into an issue where the border is not fully flush with the video–there's a little extra space at the top of each. I've attached an image below where you can see the thin white section at the top of the videos. I'm not sure why this is happening because the videos came out of iMovie with a 16:9 ratio and I thought that was the ratio Squarespace uses for video blocks? 

Anyway, here's the code that I used to make the border:

.video-player  {
  border: solid 4px #000369 !important;
}

I tried playing around with changing the padding (as I saw some people do to fix the aspect ratio for a 9:16 image)  but didn't have any luck. Any ideas for how to fix this issue are very appreciated!

website: andreakloehn.com

password: flute43

(this issue is on the "music copy" page)

Screenshot 2023-11-13 at 2.06.14 PM.png

Link to comment
  • Replies 3
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

Hi, try replacing with this code instead? Let me know how it goes.

.sqs-block-video .sqs-native-video {
	border: solid 4px #000369 !important;
}

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

You are very welcome 🙂

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

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.