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 } } JoelleM and thesimpleexplorer 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment