JoelleM Posted November 11, 2022 Share Posted November 11, 2022 Does anyone know how to change the aspect ratio for video player? I'm using the uploaded-to-Squarespace video option in fluid engine and wanted to get a fun little gallery of 4-5 talking head video shorts, using a 4:5 aspect ratio. I can upload videos in that aspect, and when actually playing it (desktop) looks as I want it to, but the video controllers are in a 16:9 shape, and so is the cropped thumbnail before you hit play. And on mobile it keeps the 16:9 ratio so the video is too small, when a 4:5 should look good on mobile with the videos stacked. If I make the video block the right shape, it just shrinks the video inside it right down with a gap top and bottom. It feels like there should be a 'design' tab in the video block to control how it looks. So frustrating! Site https://digital-prospectus.squarespace.com/ Password: Dani123 - forgive the random appearance, it's in 'playing with ideas' stage at present. Screenshots: 1 and 2 are the thumbnail and video controls showing how it forces a wider aspect ratio. The third one is what it looks like whilst playing, this is how I want it to look. 4 is playing in mobile - it shrinks down because it is using the too wide video block. Link to comment
joseph81 Posted November 11, 2022 Share Posted November 11, 2022 (edited) I just wrote yesterday an article about this actually: /*make video-blocks 4:3*/ .video-block { .embed-block-wrapper, .intrinsic-inner { padding-bottom: 75% !important } } https://www.ui-workarounds.com/control-the-aspect-ratio-of-your-videos-in-squarespace/ Edited November 11, 2022 by joseph81 tuanphan 1 Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated. Link to comment
joseph81 Posted November 11, 2022 Share Posted November 11, 2022 (edited) The 4:5 ratio would look like this: .video-block { .embed-block-wrapper, .intrinsic-inner { padding-bottom: 125% !important } } My solution works with video blocks, I'm not sure what you are using since the password you provided does not work to enter your website. Edited November 11, 2022 by joseph81 tuanphan 1 Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated. Link to comment
Solution joseph81 Posted November 12, 2022 Solution Share Posted November 12, 2022 In your case the code is slightly different: .video-block { .video-player { padding-bottom: 125% !important } } thesimpleexplorer and JoelleM 1 1 Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated. Link to comment
JoelleM Posted November 14, 2022 Author Share Posted November 14, 2022 Ah @joseph81 it works perfectly! You superstar, thank you ever so much. joseph81 1 Link to comment
mandeleah Posted December 21, 2022 Share Posted December 21, 2022 @joseph81 do you know how to make video block conform to a 1x1 aspect ratio? I have some square videos that I want to put on my page but the video block keeps making the 16:9 Link to comment
joseph81 Posted December 22, 2022 Share Posted December 22, 2022 For square you should use padding-bottom: 100% Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated. Link to comment
anthony-onlineiseasy Posted July 2 Share Posted July 2 Trying to get a square video In 7.1 Fluid Engine... padding-bottom: 100% !important the square 1:1 (1080p x 1080p) video is uploaded to SQSP (not hosted externally) and this code adds white space above and the gradient control bar to the bottom. Not at all square. Any thoughts? Link to comment
tuanphan Posted July 4 Share Posted July 4 On 7/2/2023 at 7:08 AM, anthony-onlineiseasy said: Trying to get a square video In 7.1 Fluid Engine... padding-bottom: 100% !important the square 1:1 (1080p x 1080p) video is uploaded to SQSP (not hosted externally) and this code adds white space above and the gradient control bar to the bottom. Not at all square. Any thoughts? 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
anthony-onlineiseasy Posted July 4 Share Posted July 4 To get the 1:1 video to work, I needed to use 44% (thanks @Vigasan) ... I'm curious now if I can get rounded corners on the video ... this doesn't work "border-radius: 25px;" padding-bottom: 44% !important tuanphan 1 Link to comment
anthony-onlineiseasy Posted July 9 Share Posted July 9 Any ideas on rounded corners for videos? ... note: the site is live now https://agaymanbook.com/ Link to comment
tuanphan Posted July 10 Share Posted July 10 22 hours ago, anthony-onlineiseasy said: Any ideas on rounded corners for videos? ... note: the site is live now https://agaymanbook.com/ Use this CSS /* Round video */ .video-player .plyr .plyr__controls:before {display:none!important;} .plyr__video-wrapper video, .plyr__video-wrapper {border-radius:30px !important;} anthony-onlineiseasy 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Martian Posted August 24 Share Posted August 24 I'm hoping to target a specific video and not all videos globally 😕 also, where exactly do I put the code (I'm assuming the custom css section?) Link to comment
tuanphan Posted August 25 Share Posted August 25 21 hours ago, Martian said: I'm hoping to target a specific video and not all videos globally 😕 also, where exactly do I put the code (I'm assuming the custom css section?) Add video block id before the code #video-block-id { /* Round video */ .video-player .plyr .plyr__controls:before {display:none!important;} .plyr__video-wrapper video, .plyr__video-wrapper {border-radius:30px !important;} } Use this tool to find id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Martian Posted August 28 Share Posted August 28 where does the video block ID go within the code just posted? Can you show example? Link to comment
tuanphan Posted August 29 Share Posted August 29 15 hours ago, Martian said: where does the video block ID go within the code just posted? Can you show example? replace red box with video block id Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Martian Posted August 29 Share Posted August 29 Does this code go in Custom CSS or the Advanced section of the page? Link to comment
tuanphan Posted September 2 Share Posted September 2 On 8/29/2023 at 11:03 PM, Martian said: Does this code go in Custom CSS or the Advanced section of the page? Custom CSS (Website > Website Tools > Custom CSS) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Martian Posted October 1 Share Posted October 1 (edited) trying to get this code: section[data-section-id="62288e21b7d01f1d41761926"] .video-block { .video-player { padding-bottom: 56.25% !important } } to work with this ID: #block-yui_3_17_2_1_1696090350035_1891 For this website using the Squarespace native video: www.martiandesign.com I cant seem to get it to work. Any help is greatly appreciated. I'm currently using this code but I'm having issues: /* The following resizes the Andromeda Cloud video */ #block-yui_3_17_2_1_1696090350035_1891 { padding: 0px!important; .embed-block-wrapper { padding-bottom:0!important; } .native-video-player { padding-top: 70%; } video { object-fit: cover; } Edited October 1 by Martian Link to comment
Martian Posted October 1 Share Posted October 1 Also, I'm wondering if there is any way to make the videos "Fill" the grid like photos (attached) Link to comment
tuanphan Posted October 3 Share Posted October 3 On 10/1/2023 at 9:39 PM, Martian said: trying to get this code: section[data-section-id="62288e21b7d01f1d41761926"] .video-block { .video-player { padding-bottom: 56.25% !important } } to work with this ID: #block-yui_3_17_2_1_1696090350035_1891 For this website using the Squarespace native video: www.martiandesign.com I cant seem to get it to work. Any help is greatly appreciated. I'm currently using this code but I'm having issues: /* The following resizes the Andromeda Cloud video */ #block-yui_3_17_2_1_1696090350035_1891 { padding: 0px!important; .embed-block-wrapper { padding-bottom:0!important; } .native-video-player { padding-top: 70%; } video { object-fit: cover; } Can you share link to a page where you use video? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Martian Posted October 3 Share Posted October 3 @tuanphan https://www.martiandesign.com/work/andromeda Link to comment
daniellenoakes Posted October 4 Share Posted October 4 (edited) On 10/1/2023 at 4:48 PM, Martian said: Also, I'm wondering if there is any way to make the videos "Fill" the grid like photos (attached) any luck with this? i'm looking to do this exact thing https://sponge-garlic-ds7r.squarespace.com/ pw: makeup homepage @tuanphan Edited October 4 by daniellenoakes 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