How To Create Vertical Video Collections in Squarespace

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About This Tutorial

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

Squarespace Tutorial

---

Code Example

Here are the codes from this tutorial. Make sure you update important values like the colors to make these codes uniquely yours!

/* video on the left; content on the right */
.lesson-item .lesson-details .lesson-video-inner-wrapper{
    padding-bottom:178%!important
}
@media only screen and (min-width: 788px){ 
.lesson-item .lesson-details .lesson-desc{
flex-direction:row!important;
}
.lesson-item .lesson-details .lesson-video-wrapper{
  width:50%;/* you can adjust this value */
  margin:auto;
  padding-right:50px;/* you can adjust this value */
  padding-top:10px;/* you can adjust this value */
  order:2
}
.lesson-item .lesson-detail-text-wrapper{
margin:2vw/* you can adjust this value */
}
}

/* video on the left; content on the right */
.lesson-item .lesson-details .lesson-video-inner-wrapper{
    padding-bottom:178%!important
}
@media only screen and (min-width: 788px){ 
.lesson-item .lesson-details .lesson-desc{
flex-direction:row!important;
}
.lesson-item .lesson-details .lesson-video-wrapper{
  width:60%; /* you can adjust this value */
  margin:auto;
  padding-left:50px;/* you can adjust this value */
}
.lesson-item .lesson-detail-text-wrapper{
margin:2vw/* you can adjust this value */
}
}

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

<style>
  /* video on the left; content on the right */
.lesson-item .lesson-details .lesson-video-inner-wrapper{
    padding-bottom:178%!important
}
@media only screen and (min-width: 788px){ 
.lesson-item .lesson-details .lesson-desc{
flex-direction:row!important;
}
.lesson-item .lesson-details .lesson-video-wrapper{
  width:50%;/* you can adjust this value */
  margin:auto;
  padding-right:50px;/* you can adjust this value */
  padding-top:10px;/* you can adjust this value */
  order:2
}
.lesson-item .lesson-detail-text-wrapper{
margin:2vw/* you can adjust this value */
}
}
  </style>

<Style>
  /* video on the left; content on the right */
.lesson-item .lesson-details .lesson-video-inner-wrapper{
    padding-bottom:178%!important
}
@media only screen and (min-width: 788px){ 
.lesson-item .lesson-details .lesson-desc{
flex-direction:row!important;
}
.lesson-item .lesson-details .lesson-video-wrapper{
  width:60%; /* you can adjust this value */
  margin:auto;
  padding-left:50px;/* you can adjust this value */
}
.lesson-item .lesson-detail-text-wrapper{
margin:2vw/* you can adjust this value */
}
}
  </style>

---

Related Content

📑 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