How To Create Vertical Video Collections in Squarespace
Want to change a single video block to vertical format?
Check out this video instead: insidethesquare.co/squarespace-tutorials/video-block-size
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Video collection pages are a great way to feature video content on your Squarespace site, but they are stuck in the old 16:9 presentation style. If you want to create a collection of vertical videos - content recorded in a 9:16 ratio, like Instagram reels or TikTok content - this tutorial is for you!
You’ll learn how to use a few lines of simple code to adjust a video collection layout so you can display a 9:16 video on the page, with the video excerpt on the left or right.
You’ll find the codes below; make sure you watch the video so you know how to use them & how to customize them!
To learn more about video collection pages, check out this tutorial from 2022: insidethesquare.co/video
Here are the codes from this tutorial. Make sure you update important values like the colors to make these codes uniquely yours!
Want to add your code to an individual video collection? Click on the gear icon for the collection to access your page settings. Under the advanced section, you’ll find the option for page header code injection. Paste this code below so it will include the style brackets you need to add CSS to that page on your site
📑 My Squarespace code collection → insidethesquare.co/css
📖 Learn CSS for FREE → insidethesquare.co/learn
❤️ Support my blog with a donation → buymeacoffee.com/insidethesquare
🙋♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help