Vertical Video in Squarespace Tutorial - How to change the video block ratio in Squarespace

[@InsideTheSquare]

⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@alexandreToesca]

Hey there, I have the new version of the Squarespace ('website'), but when I try to copy your moves and add a red layer to 'test', it doesn't go red, and neither the change of format on the video is working. Any idea why art doesn't work? thanks a lot.

[@stackathy]

Have you been able to find another resource that's more updated for this? I think this code is outdated...!

[@Sheenas_wellness_glow_up]

Thank you, this video was very helpful.

[@lifted4evr]

@@alexandreToesca I'm having this same problem too. Wondering if with this 'new version' of Squarespace is somehow nullifying the code in this tutorial.

[@RebeccaChambliss-b2d]

Lifesaver! I didn't want to pay to host my client videos on Vimeo anymore but had no idea how to make them look as good when uploaded directly. Thank you!

[@InsideTheSquare]

You are so welcome - glad this was a good solution for you!

[@ruminielle]

@@InsideTheSquare thaaank you so much 🤍 your video was a lifesaver for me toooo 🥹🙏🏼

[@furmston.creative.studio]

My kind of tutorial. Short and very easy to follow. Most importantly, it worked! Thanks so much for sharing.

[@InsideTheSquare]

Awesome - happy to help! :)

[@lisavanggg]

CHEF'S KISS!!!!!! Beautiful tutorial & exactly what I needed. Thank-you!!

[@InsideTheSquare]

You are so welcome! 🥰

[@trebacon1]

Thank You So Freaking Much. Your videos are very easy to follow and to the point. I can always rely on your videos to help with square space.

[@InsideTheSquare]

Thank you so much for your comment 🥰 I'm happy that my work is helping you with yours! 🙌

[@chelegutek3739]

You're such a great educator! Thank you for all of your amazing and helpful videos. 🙏🏻

[@InsideTheSquare]

Thank you, and you are so welcome! 🥰

[@dac8767]

quick, simple, clear. love your style. just subscribed

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@akalantarov]

Thank you Becca. This is gold- sent this to Squarespace customer support because they have no idea..

[@InsideTheSquare]

Your comment just made my day - thank you so much for letting me know! 💙

[@michellesourisseau901]

Thank you! Your tutorial is easy to understand and gave me quick results.

[@InsideTheSquare]

Awesome - happy to help! 🙌

[@mishonne8498]

Thank you! Extremely easy to use, superb explained. Love it!

[@InsideTheSquare]

You’re welcome! Happy to help. 😎

[@Popehousedesign]

Great video! Thank you!

[@InsideTheSquare]

You're welcome!

[@adamcade1511]

You're the absolute best! Nice and straightforward, I appreciate the recommendation for the Code Finder. Worked like a charm for this gallery of before and after videos with 16:9 and 9:16 aspect ratios I'm working on. Thanks again!! :)

[@InsideTheSquare]

You are so welcome - happy to help!

[@trishmccallister]

Extremely helpful! Thank you.

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@sidneyraz]

Thanks! I didn't want to get any new accounts or anything and all my content is vertical so this is perfect. woop!

[@InsideTheSquare]

Yay - happy I could help! ☺️

[@willthethrillwright]

Thank you so much! I'm useless when it comes to this short of stuff and your video really helped. :)

[@InsideTheSquare]

Happy to help :)

[@karu2555]

This must be fate but I started a site 2 days ago and I moved to all the other sections because I couldn't do this. no forums talk about this on squarespace, nor on reddit. I was about to give up and just put an image because I was not going to pay a vimeo membership just for a single video ☠ and then I found your video specifically TODAY while I was working on it again! THANK YOU that was such a coincidence honestly 😂😂😂😂

[@InsideTheSquare]

Karu! That's so awesome! Your comment just made my day- Thanks!!!☺️

[@hmg7871]

Great tip and details! Will be using this soon, thank you!

[@InsideTheSquare]

You’re welcome - happy to help!

[@Mel-dg9pm]

Thank you so much. I was really struggling with this ❤

[@InsideTheSquare]

You're so welcome - happy to help!

[@michaelosullivan8318]

This is super helpful, thank you so much! Exactly what i was after!

[@InsideTheSquare]

You're so welcome - happy to help!

[@davekorns]

Love it Becca. I think you explained something that I didn't fully understand before (what bottom-padding has to do with aspect ratios ... kinda weird concept) I too have been experimenting with vertical 9:16 format videos, YT shorts in particular. I have a blog site and I wanted to appeal to the TicTok or YT-Shorts style viewer. What I really wanted to do was use YT to create a channel where I could personally skim shorts and pick a group of maybe 20 or 30 YT shorts (by Save to Channel) into a channel each month and then have my blog website attach to that channel and give a similar, watch-and-scroll-up experience. I didn't get that to work (at all) so I stated fiddling with a SqSp Gallery in GRID style, and then manually cut/pasted YT Short URLs into the SqSp gallery. It's real pain in the you know what as a way to present a list of videos (tedious). The other issue was SpSp Gallery Videos don't have a 9:16 aspect-ration option. For vertical videos it has 2:3 and 3:4. So I searched around and borrowed (stole?) some CSS that changed SpSp Gallery Video Aspect Ratio 3:4 vertical to ACTUALLY be 9:16 vertical. I DID NOT fully understand what I was doing but here was my hack. More bottom-padding magic I understand a little better. // Gallery-Grid Aspect-Ratio 4:3 vertical to ACTUALLY be 19:6 vertical (not a good practice, but...) #block-yui_3_17_2_1_1674934155964_4553 .sqs-gallery-block-grid.sqs-gallery-aspect-ratio-three-four-vertical .slide .margin-wrapper a.image-slide-anchor, .sqs-gallery-block-grid.sqs-gallery-aspect-ratio-three-four-vertical .slide .margin-wrapper .content-wrapper, .sqs-gallery-block-grid.sqs-gallery-aspect-ratio-three-four-vertical .slide .margin-wrapper .content-wrapper.content-fill .sqs-video-wrapper { padding-bottom:177.777% } You can see how I used it here on my blog site: https:overcurious.org/shorts I should, but haven't posted a feature request to Squarespace for Gallery Grid to support a 9:16 or 16:9-Vertical aspect ration because it is becoming to popular. Thanks again for your work. You're educating us SqSp hackers and inspiring.

[@wdnk]

Super helpful. Thank you!

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@katharinahuang3941]

Wow thx so much! Exactly what I needed!

[@InsideTheSquare]

You're welcome - happy to help! 😊

[@SmileWithAnnabel]

so so so helpful!!! thankyou!

[@InsideTheSquare]

You're so welcome!

[@benlifton]

This is fab! !Thank you so much x

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@martindrake81]

Grateful for this, Thank you :)

[@InsideTheSquare]

You're most welcome! :)

[@katiebuckleitner7028]

Thanks for the help!

[@InsideTheSquare]

You’re welcome ☺️

[@marinaledean2351]

THIS WORKS!!! Thank you SO much!!!!!!!!!!!!!!

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@tabithastokes2735]

Thank you once again 🥳

[@InsideTheSquare]

You’re welcome 😊

[@fachrizaagung8190]

IT WORKS WELL! THANK YOU SO MUCH :)

[@InsideTheSquare]

You're welcome - happy to help!

[@newmero]

Great tutorial and well explained. I have though several videos on each page as I am demonstrating different math exercises. Each video block is extreme big. Can you please make a tutorial on how to make the video block size smaller to fit into a catalogue or in a vertical row?

[@InsideTheSquare]

Using a fluid engine section, you can manually reduce the width of the video which will proportionately reduce the height. I don't have a video on this yet, but I'll add it to my to do list 😉

[@newmero]

Yes, thank you for answering bit I somehow found out that you can minimize the size by taking the corner or the block.

[@bluewaverly]

it makes my video longer, but remains a bit too skinny no matter what percentage i tweak it to. what would i put instead of "padding-bottom" to increase the width a bit?

[@InsideTheSquare]

Instead of adding more code, you can try adjusting the width of the content block manually.

[@JR-ro9rl]

Wow thank you!

[@InsideTheSquare]

You're welcome! ☺️

[@JuliusA3Dguy]

Thank you great Tutorial!! However, now I can only use vertical format videos across my site or is there a way to still have both formats?

[@InsideTheSquare]

Great question and yes, you can! You can target a specific video block so it only changes one or two of them and not all. Here is a tutorial with a little more info on CSS targeting tricks: insidethesquare.co/squarespace-tutorials/css-targeting-tricks

[@impressionistslandscape]

you're a life saver!!!!

[@InsideTheSquare]

Thanks Christian! Happy to help :)

[@ericag7434]

Thank you!

[@InsideTheSquare]

You're welcome! :)

[@julieroy7427]

THANK YOUUUUU so much!!!

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@riccardosantorsola5528]

Thank you ! really helpfull! I got an error adding more than one vertical videos. they still work perfectly , but in the mobile view the layout of the page now is smaller and it doesn't fit perfectly the screen anymore. basically the page is floating. do you know how to solve it? thank you!

[@InsideTheSquare]

Intersting -this code shouldnt effect the page at all! Are you sure your mobile browser percentage is at 100%? Are you seeing a page size issue on other pages? Share a link to the page on your site that is acting up and I'll see what's going on behind the scenes.

[@BB-dl3om]

Thank you!

[@InsideTheSquare]

You’re welcome! ❤️

[@BB-dl3om]

@@InsideTheSquare Hi Becca! Thanks again for all your help already. I was wondering two things: Is there a way to have different sizing for mobile vs desktop? Video looks perfect on mobile and huge on desktop for me. And, is there a way to trouble shoot autoplay when it stops working on mobile but works fine on desk top? I have the square space 7.0 version.

[@Bruets]

This is great for mobile, but what if I want the same video to be kept horizontal for desktop viewing? And does this work on embedded KZbin videos?

[@InsideTheSquare]

Thanks! Check out this tutorial on how to create an alternate layout for mobile vs desktop: kzbin.info/www/bejne/d4LRqJufqaqkpKs

[@philippenguyen2924]

Does it affect the whole webstie or one page only

[@InsideTheSquare]

This would change the videos on the whole site, but this tutorial will show you how to add this code to one page: insidethesquare.co/singlepage

[@nannajacobsson7833]

you just saved my life

[@InsideTheSquare]

Happy to help! 🥰

[@seif.rashwan]

Thank you! how do i do it to multiple videos though?

[@InsideTheSquare]

Great question! You can target all videos in a section using the data section id and the selector, or you can target multiple blocks, also adding the selector, separating with a comma. Here is a tutorial with more info: insidethesquare.co/resources/squarespace-css-targeting-tips

[@allfactsshared]

You are amazing!

[@InsideTheSquare]

Thank you 🥰

[@mikaelfredholm5355]

Great video, if I want to make the video block Square (not vertical), do I still adjust the padding-bottom percentage? Thanks Becca.

[@InsideTheSquare]

Great question - and yes! Depending on the width of your block, you'll need to make some manual padidng adjustments until it's just right.

[@VJIX]

You are awsome, SquareSpace not so much.

[@InsideTheSquare]

Haha 😉 happy to help

[@LisaGremmel-ki1fh]

Thanks!

[@InsideTheSquare]

Thank you so much for your support! 🥰

[@whpss3954]

Hi, thank you for this informative video. I am feeling so dumb but what would the percentage be for 4x5 ratio. I don't get the 120 percent part

[@InsideTheSquare]

It kinda depends on the width of your content block & grid cells too - i'd just adjust that percentage until it looks right :)

[@JulieMcMillan]

I would love to be able to do this, but the CSS code doesn't seem to working for me - nothing changes. The video block id starts with yui, then the numbers, and a Google search seems to indicate these blocks can't be used with CSS? For reference, I am using 7.1, I used the Chrome extension to find the block id, and the video is uploaded directly to Squarespace. Any ideas?

[@InsideTheSquare]

YUI's regenerate every time the page loads. You need to use an id that starts with #block.... not #yui. The chrome extension mentioned will get you that data: insidethesquare.co/chromeext If you are new to code, check out some of the beginner troubleshooting tips at insidethesquare.co/codehelp

[@danadaverio]

Hi! Thank you for the tutorial, it works, but i have more than one video and in others sections that i want to mantain with 1920x1080, how can i do that?

[@InsideTheSquare]

You can add this code to one specific block using its block I’d. Here is a video with more info: kzbin.info/www/bejne/nmnUl42alqaHmLcsi=IhI6m1QZ0WnVCif2

[@MajaRose-j7f]

Hey Becca, this is great, thank you! do you know a way to auto play the video and get rid of the gradient overlay? my client wants a super clean site. Thanks!

[@InsideTheSquare]

Hey Maja! You can enable autoplay when you upload a video directly to Squarespace, but it isn't available for a KZbin or Vimeo link at this time. For the gradient overlay, I'd recommend uploading a custom thumbnail that looks exactly the way you want it to. Hope that info helps and best of luck with your project! :)

[@user-bl2xb9uy2t]

Super useful thank you! Can I block multiple videos with the same CSS? I have a few videos on separate pages that I want vertical, while keeping the rest horizontal. How do I apply the block size change to only selected videos?

[@InsideTheSquare]

You can use a unique block ID to target a specific thing on your site; check out this tutorial for more info: kzbin.info/www/bejne/nmnUl42alqaHmLc

[@JayWilsonMedia]

How can I make the 1x1 video bigger on the page?

[@InsideTheSquare]

You can manually adjust the width of the content block.

[@davidsunnock4878]

How do I get rid of the shadow on the video player?

[@InsideTheSquare]

I'm not sure what shadow you are referring to but I'd love to help. Can you share a link to the page you're seeing a shadow on?

[@romanschrock8825]

What about stretching the block horizontally? Every time I try to input your code, I can only make the box taller, not shorter. Any suggestions?

[@InsideTheSquare]

Hey Roman, This code stretches the block to be 9:16 ratio by adding 120% of padding to the bottom of it, and adjusting the display ratio, but you can change that number to anything you want it to be!

[@angelicazander]

Same question, how to make the block more widescreen/broader than the original 16:9? @@InsideTheSquare

[@jeremyhannigan]

Quick and informative video! Can I ask, please, is this code supposed to work with videos linked from KZbin and Vimeo, or is this just for videos uploaded directly to Squarespace? I ask because I've tried the code with and without the block ID, but it doesn't seem to affect the video I've linked from Vimeo or anything else on the page...

[@InsideTheSquare]

Great question! Feel free to submit a code help request here: insidethesquare.co/code-help

[@mikamagic6458]

Looks good. I have massive massive problems with video blocks in squarespace 7.1 . When i add a videoblock with a video i always get white space at the top and bottom and it seems not to be deleted....so frustrating. What Am I missing.....?

[@InsideTheSquare]

That’s pretty strange - if your site isn’t working the way it’s supposed to, you should definitely contact the Squarespace support team: support.squarespace.com/

[@MeganShields-e6n]

Hello, this is SOSO useful thank you - first time I've used code successfully! One question - what if I wanted to do this with a couple of videos on the page - but not all of them? Where do I add the 2nd ID for another video? thank you!

[@MeganShields-e6n]

I have just sorted this with another video of yours! Your videos could not be more concise and clear - you've helped make my website so much better! thank you!

[@InsideTheSquare]

Awesome - so glad you found a solution! Happy to help 😊

[@fishlax1]

@@MeganShields-e6n can you plz link the video that answers this question - ty ty

[@julieroy7427]

Hi there, I isolated my video to 9:16, with the code and the google extension and it works! :)) Now I have the same video on another page so I need to isolate it too.... how should I do it since I also have videos 16:9 on other pages that I would wanted to keep it that way. I think I am about to make it, it is just probably the sequence that I might be wrong. Thank you so much!

[@julieroy7427]

Should I put the info video side by side, between brasquet, dot, or etc... Thanks

[@InsideTheSquare]

Great question! You can use a block id to add the CSS to that specific block - here is a tutorial with more info: insidethesquare.co/squarespace-tutorials/css-targeting-tricks

[@BigJuicerMan]

Was wondering if you knew how to make all vimeo videos the same height? Currently mine all form to the video height and not the container height, cant seem to find a way to make it so the videos are cropped or have black bars

[@InsideTheSquare]

Great question! The video ratio has more to do with Vimeo than Squarespace; when you link to a Vimeo video it creates a frame and we can't really control whats inside that frame with Squarespace CSS. Sorry I cant be of more help, but best of luck with your project!

[@pelle0618]

How to change it horizontally in stead of vertically?

[@InsideTheSquare]

Adjust the ratios in the code. Good luck!

[@mohamedalighouila5098]

HI @Becca, what if only the container is changing ration and not the video? Like in my case. :(

[@InsideTheSquare]

I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@mohamedalighouila5098]

@@InsideTheSquare Thank you for your answer, In fact I was targeting the wrong class which is always challenging to find the right one to target. I solved it in the end

[@user-yd2nx7by8l]

What if it is a horizontal long skinny video? How can I remove the extra space at the top and bottom of the player? Like 1000 x 313 px

[@InsideTheSquare]

Interesting idea! You can definitely play around with the padding for the blocks and also the max and min width settings using CSS 👍👍

[@aaliyahraghnal]

what to do if the embed block wont move up

[@InsideTheSquare]

Try removing the padding in your section. Here is a squarespace article about editing sections: support.squarespace.com/hc/en-us/articles/6421525446541-Editing-your-site-with-Fluid-Engine

[@aaliyahraghnal]

@@InsideTheSquare Ahh I love your videos! Right now I have the videos vertical but it's left a padding that is not moving. I've tried code blocks and more with no success but I'll look thru

[@chaneldouglas3495]

omg..life saver!

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@leslie-annemock6268]

My issue when I do this is the video is VERY large. Is there a way to change the height of the video?

[@InsideTheSquare]

Great question! If you change the width of the content block, the height should adjust automatically.

[@leslie-annemock6268]

@@InsideTheSquare Thank you for your response. Technically, you can't change the width of video content blocks. Is there a way you know that maybe I am not aware of? I will say though, I found a way around it by adding spacers to the sides, then I can change the width my changing the width of the spacers. And looks like the spacers don't appear in mobile, which is nice. But just checking there is not something I'm missing. Thanks again.

[@InsideTheSquare]

@@leslie-annemock6268 sounds like you're in classic editor OR version 7 in which case, yes, spacers is how you can manually adjust the size of a block. Well done!

[@crconstandse]

Hey Becca, I can't seem to figure out why the above CSS is not working on my video. I've added a 1920x1080 video to my Squarespace page, and added the CSS as mentioned in the recording. However, what happens is that it applies the padding to the wrapper / container and instead adds a massive white-space to below the video. Could you please help out?

[@InsideTheSquare]

I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help

[@michaelhull7307]

​@@InsideTheSquare Hi Becca, I'm having the same issue. What was the solve?

[@RiCsoundbox]

Adding #block code using firefox. Any tips on finding it there? Thanks Mac users don't normally work with chrome ;-)

[@InsideTheSquare]

I am not quite sure what you are trying to create but I would love to help! Feel free to submit a tutorial request with more info at insidethesquare.co/suggest-tutorial

[@RiCsoundbox]

@@InsideTheSquare Hi, Problem solved. I found the tool to get the Squarespace ID for firefox.

[@InsideTheSquare]

@@RiCsoundbox Awesome! Would you mind sharing it so others can find it too?

[@directedby-e]

Why can't you embed KZbin shorts videos? Thats a feature that you guys need to add with how popular short form vertical video is

[@InsideTheSquare]

I don’t actually work for Squarespace, but I’ll pass it along in the forums! I know they are always working hard on improving the platform. 🙌

[@AaronsMediaCompany]

how to do this if you have 5-10 portrait videos? in my case, I'm trying to showcase portrait content..UPDATE: nvm,lol. figured it out. however, that would be a great video idea, you know? how to add multiple portrait videos and photos on the same page.

[@InsideTheSquare]

Hey Aaron! Glad you figured it out! Good job! And, I'll add your suggestion to idea list for tutorials. Happy coding!

[@vdodan]

Informative content, questionable sound mixing choices.

[@InsideTheSquare]

I can’t be good at everything 😂 lol

[@vdodan]

@@InsideTheSquare It's great that you're trying to be ... :)) Now honestly, after almost 370 videos ... today's sound mixing took me by surprise; way too "auto-tunded" ...

[@calebwatson1020]

Hey Becca, thanks for the video! Your videos are always super helpful. Can you help me with an issue I'm having. When I add the code as provided it doesn't crop around the sides like in your video. Instead I just get extra white space on top, but it keeps the width of my video the same. Here's a link for reference as to what's happening: drive.google.com/file/d/1O6xiY0DfF5ReHItjHA4X2FK-3GsmD8Hx/view?usp=sharing

[@InsideTheSquare]

Thanks for the sreenshot! The black space on the left and right of the video shows that the actual video size is still 16:9 so it's not a vertical video, it's horizontal. Squarespace can't crop a video, so you'll need to find a program that can, like Canva, so you can upload it to Squarespace in the right aspect ratio.