Jump to content

How to display a vertical video without stretching out the grid?

Go to solution Solved by Ziggy,

Recommended Posts

Hi everyone, first time seeking for help on this platform, as I could not find an answer elsewhere. 

I have added below css to make my 3:4 video look its size.

.video-block .video-player{
padding-bottom:77%
}

However, I find that it stretches out the grid a lot. ScreenShot2023-10-25at6_11_10PM.thumb.png.c41246256fd229dd3a0dd6d4cffa3a6d.png

And because of this, it makes it difficult to add any text block next to it without creating all the extra space below that is unnecessary (the red line is the smallest I could make the block into).ScreenShot2023-10-25at6_22_12PM.thumb.png.bdddfc8673df2b3b2f39d4eddc02c29f.png

(Oddly enough, I do not have this issue on the mobile view but desktop view)

Can anyone please advice on what to do? Thank you very much!

Link to comment
  • Solution

It looks like you need to extend the video block to take up more rows in the grid, then save and refresh the page and try editing the page again.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
47 minutes ago, Ziggy said:

It looks like you need to extend the video block to take up more rows in the grid, then save and refresh the page and try editing the page again.

Thank you Ziggy! I did have to play around a bit to find the right balance (and I had to remove the video first in order to adjust the block size?) as it's more confusing with the added padding, but I think I've managed to do it with your advice! Thank you so much..! image.thumb.png.6ad97898a8200d6a901b793d2307790e.png

Link to comment
12 minutes ago, melissa61436 said:

I think I've managed to do it with your advice! Thank you so much..!

Nice one! Glad that's working for you now!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.