How to add a vertical video - Squarespace 7.1
Videos are going portrait as much as landscape these days. If you’ve got a social media video that’s been filmed for TikTok, Instagram or YouTube Shorts then you need to find a solution to perfectly frame this content.
By using the code below, it will stretch the height of the native Squarespace video block, making it work for your portrait videos.
Add this to your Custom CSS
Adjust the “100%” if you want to change the height of the video player.
//Vertical Video Format
.sqs-native-video .native-video-player {
padding-bottom: 100% !important;
}Need to change only one video on the page / website?
You can target the specific video block by adding this #blockID to the code. Replace “#block-yui_3“ etc on your website.
Reference:
Not sure how to find the block ID’s within your Squarespace website? Download the Squarespace ID Finder Chrome Extension
//Vertical Video Format
#block-yui_3_17_2_1_1721037381757_4485 {
.sqs-native-video .native-video-player {
padding-bottom: 100% !important;
}
}Will this work for embedded videos?
Currently this solution is only in place for videos uploaded directly to the Squarespace platform.