Jump to content

Video container vertical/horizontal

Recommended Posts

Please i need some help on handling vertical AND horizontal video.  A way to contain both formats 16:9 and 9:16 on one page.


pass: testing 


I hope Squarespace is watching this space , it makes NO sense in 2023 trying to place a video in your website and having to sieve through CSS solutions that sometimes work sometimes no...

There are countless creators that produce content on 16:9 , 9:16 , 5:4 , 1:1. 
The video container should have the basic video needs of today's media.  The whole direction of social media platforms is heavily based on vertical media and we are trying still to find workarounds on one of the most premium website build platforms worldwide.  There should be some kind of toggle or selection for the video container that dictates format. 




Edited by Panos_vsl
forgot the url
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

After looking into some of the solutions it seems that the best practise would be to target each video of the website individually. 

However there are still some issues that i hope some clever CSS wizard can edit.  The issue is that even though the container can almost match the video's dimensions there is a gradient ramp with grey colour on the bottom in order to show the video controls. 

Is this gradient editable? Can it be removed? 



Screenshot 2023-06-14 at 2.33.48 PM.png

Link to comment

Hi! Been trying to read along the treads but still can't figure out how to get 9x16 videos to play on my pages. Love what you did on your site, can you share how you go both 9x16 and 16x9s on your pages?

Thank you!


Link to comment

Hello , 


So from what i understand you have to work on each video separately. So i got the Chrome extension that shows the IDs of all the items on the page and for each vertical video i will have to create a new CSS entry.

It might be a different way that is more efficient but am a complete noob on CSS i only find the resources. 

Here's a snip of what i used hope it helps: 


//Code for Vertical videos//

#block-yui_3_17_2_1_1686672595487_1473.video-block .video-player {padding-bottom: 120% !important;}

#block-yui_3_17_2_1_1686842161117_17601.video-block .video-player {padding-bottom: 120% !important;}

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.