Maniola Posted August 11, 2022 Share Posted August 11, 2022 Site URL: https://www.clipsk.com/test I'm trying to embed or upload videos displayed in vertical / 9:16 aspect ratio but I can't find a way to make it work. The video block always shows up in standard widescreen format. If I use an embed block and define aspect ratio in pixels in the embed code, the video flows outside of the container/block. https://www.clipsk.com/test Magopavlov 1 Link to comment
Solution tuanphan Posted August 13, 2022 Solution Share Posted August 13, 2022 Try adding this to Design > Custom CSS to adjust ratio .sqs-native-video .native-video-player { padding-bottom: 100% !important; } Maniola, DaveRizz, TimMarner and 5 others 8 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Maniola Posted August 16, 2022 Author Share Posted August 16, 2022 Thank you @tuanphan – this did the trick for uploaded/native Squarespace video! Is it possible to do a similar solution for embedded videos? Link to comment
tuanphan Posted August 20, 2022 Share Posted August 20, 2022 On 8/16/2022 at 4:56 PM, Maniola said: Thank you @tuanphan – this did the trick for uploaded/native Squarespace video! Is it possible to do a similar solution for embedded videos? Can you share link to page where you use embed video? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Maniola Posted August 23, 2022 Author Share Posted August 23, 2022 @tuanphan Yes! There are examples in both classic editor and fluid engine on this page: https://www.clipsk.com/test Link to comment
tuanphan Posted August 24, 2022 Share Posted August 24, 2022 18 hours ago, Maniola said: @tuanphan Yes! There are examples in both classic editor and fluid engine on this page: https://www.clipsk.com/test Try this CSS .fe-block .embed-block iframe { width: 100% !important; height: 350px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Faten Posted August 28, 2022 Share Posted August 28, 2022 On 8/13/2022 at 5:18 PM, tuanphan said: Try adding this to Design > Custom CSS to adjust ratio .sqs-native-video .native-video-player { padding-bottom: 100% !important; } can you apply this to certain videos? when i added it to my CSS it changed all videos on the website from horizontal to vertical. Link to comment
tuanphan Posted August 29, 2022 Share Posted August 29, 2022 On 8/28/2022 at 1:20 PM, Faten said: can you apply this to certain videos? when i added it to my CSS it changed all videos on the website from horizontal to vertical. Target with video block id. #video-block-id .sqs-native-video .native-video-player { padding-bottom: 100% !important; } Find ID with this tool: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
andreaball Posted October 18, 2022 Share Posted October 18, 2022 (edited) On 8/13/2022 at 6:18 AM, tuanphan said: Try adding this to Design > Custom CSS to adjust ratio .sqs-native-video .native-video-player { padding-bottom: 100% !important; } Hey, thank you for this! This worked, but the video player is wider than the video. How could I match the width? How do I apply it to only videos that I upload that are vertical, the CSS above didn't seem to do the trick. Edited October 18, 2022 by andreaball Link to comment
andreaball Posted October 18, 2022 Share Posted October 18, 2022 On 8/27/2022 at 11:20 PM, Faten said: can you apply this to certain videos? when i added it to my CSS it changed all videos on the website from horizontal to vertical. Did you ever figure out the code to change only videos that are vertical to vertical? Link to comment
SANTOZZ Posted December 5, 2022 Share Posted December 5, 2022 (edited) here you go. .video-block { .video-player { padding-bottom: 125% !important } } Edited December 5, 2022 by SANTOZZ miss spelled Link to comment
Daniellisbona Posted December 31, 2022 Share Posted December 31, 2022 (edited) am i doing something wrong? the widht is still not matching the video when it plays Edited December 31, 2022 by Daniellisbona Link to comment
Romer Posted January 5, 2023 Share Posted January 5, 2023 Hello! How can this be done for mobile? Thanks Link to comment
Fulleren Posted February 24, 2023 Share Posted February 24, 2023 I uploaded a vertical video into assets. When I select in the video blocks, it appears as a vertical video within a horizontal block. Is there a way to adjust this block so that it fits to the video? In this case, the video is 4x5. Link to comment
tuanphan Posted February 25, 2023 Share Posted February 25, 2023 Hi, Can you share link to this page? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alexpac Posted March 2, 2023 Share Posted March 2, 2023 have the same problem , how do you solve it? Link to comment
derricksrandomviews Posted March 2, 2023 Share Posted March 2, 2023 Adjust the block with CSS code as explained very well right here: https://insidethesquare.co/squarespace-tutorials/video-block-size Link to comment
Fulleren Posted March 9, 2023 Share Posted March 9, 2023 Thank you everyone. I ended up doing a workaround that @Tuanphan (commented above) recommended to me, which is to upload the video via Manage Custom Files, and then use a custom block to showcase it. Link to comment
tombigby Posted May 19, 2023 Share Posted May 19, 2023 Hi folks, Having similar trouble with video formatting as a background to a section on a homepage. Formatting of the video and the spacing of the adjacent section all looks good on desktop and mobile landscape, but on mobile portrait view, I end up with a big space underneath (image attached). Website is here: BaltimoreSmartLine.org If you need the PW DM me please. Here's the CSS i'm using for video formatting now: /**Full Width Block for mobile**/ @media screen and (max-width:767px) { [data-section-id="5e8e5176957b3306a8e428c7"] video { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; bottom: 0 !Important; } [data-section-id="5e8e5176957b3306a8e428c7"] { height: 35vh; margin-top: 20vh; } } Any thoughts on how to tighten up that spacing on mobile portrait view without messing up other views? Thank you! Link to comment
tuanphan Posted May 22, 2023 Share Posted May 22, 2023 On 5/20/2023 at 12:01 AM, tombigby said: Hi folks, Having similar trouble with video formatting as a background to a section on a homepage. Formatting of the video and the spacing of the adjacent section all looks good on desktop and mobile landscape, but on mobile portrait view, I end up with a big space underneath (image attached). Website is here: BaltimoreSmartLine.org If you need the PW DM me please. Here's the CSS i'm using for video formatting now: /**Full Width Block for mobile**/ @media screen and (max-width:767px) { [data-section-id="5e8e5176957b3306a8e428c7"] video { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; bottom: 0 !Important; } [data-section-id="5e8e5176957b3306a8e428c7"] { height: 35vh; margin-top: 20vh; } } Any thoughts on how to tighten up that spacing on mobile portrait view without messing up other views? Thank you! What is site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted May 25, 2023 Share Posted May 25, 2023 16 hours ago, tombigby said: BaltimoreSmartLine.org Don't remove any code in your current code Add this to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5e8e5176957b3306a8e428c7"] { min-height: unset !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Panos_vsl Posted June 13, 2023 Share Posted June 13, 2023 this is such a big issue how is Squarespace not resolving this? We have vertical videos for many years now and many creators have both vertical and horizontal videos because of course MANY times a project will have both. I have both format videos on a page and its not clear at all how to actually resolve this. The chrome extension doesn't seem to show the IDs so i can try some of the solutions proposed here. We live in a world were vertical video is here to stay , come on Squarespace give us some kind of toggle within the video container!! Can anyone help? I will have this issue on several pages so if there is a solution i will follow it... https://clover-vanilla-t98p.squarespace.com/excercitatio pass: testing PRWORKS 1 Link to comment
Panos_vsl Posted June 13, 2023 Share Posted June 13, 2023 On 3/9/2023 at 8:56 PM, Fulleren said: Thank you everyone. I ended up doing a workaround that @Tuanphan (commented above) recommended to me, which is to upload the video via Manage Custom Files, and then use a custom block to showcase it. Can you share some info about this workaround on vertical videos please? Its June 2023 and this issue is still not fixed at all. Link to comment
tuanphan Posted June 15, 2023 Share Posted June 15, 2023 On 6/13/2023 at 9:02 PM, Panos_vsl said: this is such a big issue how is Squarespace not resolving this? We have vertical videos for many years now and many creators have both vertical and horizontal videos because of course MANY times a project will have both. I have both format videos on a page and its not clear at all how to actually resolve this. The chrome extension doesn't seem to show the IDs so i can try some of the solutions proposed here. We live in a world were vertical video is here to stay , come on Squarespace give us some kind of toggle within the video container!! Can anyone help? I will have this issue on several pages so if there is a solution i will follow it... https://clover-vanilla-t98p.squarespace.com/excercitatio pass: testing You mean show all videos on this page to vertical format on mobile? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment