bibo0903 Posted November 4, 2023 Share Posted November 4, 2023 (edited) Hi there, i'm struggling trying to get my video to completely fill its 'box' at all times no matter what browser size. It wants to always hold its exact ratio, so it appears that the top and bottom have large padding, which is what I don't want. I would like the video to fill its space completely, in order to always match the height of the picture next to it. I hope this makes sense! any help would be greatly appreciated! My website is chloeramli.com !! I've inserted a picture of the bottom padding I would like to remove for both videos in my landing page, please help Edited November 4, 2023 by bibo0903 Add tags Link to comment
melody495 Posted November 4, 2023 Share Posted November 4, 2023 Hi, if your video doesn't keep its aspect ratio, it will look distorted, which is probably not what you want to achieve. Since your video is wider than it's tall, the limiting factor is going to be the width. If you want to have it the same height as another image, then your video could go off screen or overlap what's to its right. In editing mode, if your video block isn't already the same height of your image, do that first and see how it behaves, and if that does what you want it to do. Let me know how it goes. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
bibo0903 Posted November 5, 2023 Author Share Posted November 5, 2023 13 hours ago, melody495 said: Hi, if your video doesn't keep its aspect ratio, it will look distorted, which is probably not what you want to achieve. Since your video is wider than it's tall, the limiting factor is going to be the width. If you want to have it the same height as another image, then your video could go off screen or overlap what's to its right. In editing mode, if your video block isn't already the same height of your image, do that first and see how it behaves, and if that does what you want it to do. Let me know how it goes. I saw another topic and a member was able to fix this problem with the code down below though.. the code hasn't worked for me but I think its a step closer to the right direction. My video is already the same height of the image supposedly as well and it still behaves weirdly section[data-section-id="651597d004d0441072b29cc5"] .sqs-block-video { .sqs-block-content, .intrinsic, .embed-block-wrapper, .sqs-native-video { position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; padding: 0 !important; } .video-player { padding: 0 !important; video { object-fit: cover !important; } } } Link to comment
melody495 Posted November 5, 2023 Share Posted November 5, 2023 Hi, please share a link to your website so can check -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
bibo0903 Posted November 5, 2023 Author Share Posted November 5, 2023 4 hours ago, melody495 said: Hi, please share a link to your website so can check Yes sure, it's chloeramli.com ! Link to comment
Solution melody495 Posted November 6, 2023 Solution Share Posted November 6, 2023 On 11/5/2023 at 7:39 AM, bibo0903 said: I saw another topic and a member was able to fix this problem with the code down below though.. the code hasn't worked for me but I think its a step closer to the right direction. My video is already the same height of the image supposedly as well and it still behaves weirdly section[data-section-id="651597d004d0441072b29cc5"] .sqs-block-video { .sqs-block-content, .intrinsic, .embed-block-wrapper, .sqs-native-video { position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; padding: 0 !important; } .video-player { padding: 0 !important; video { object-fit: cover !important; } } } Hi, this code is not making anything changes for your videos because the data-section-id does not exist on your webpage. That is unique, so you need to change it to the id for your section. change the first line to this and see? section[data-section-id="65432b8278396716f29e57a8"] .sqs-block-video { Beware the code will crop your video. Because your video is already at full width. On 11/4/2023 at 2:16 PM, bibo0903 said: I would like the video to fill its space completely, in order to always match the height of the picture next to it. I hope this makes sense! any help would be greatly appreciated! Back to your original question though. I don't see any images next to that video, can you please clarify? -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
bibo0903 Posted November 16, 2023 Author Share Posted November 16, 2023 Thank you so much!!!! It works! out of curiosity where did you get the data id? Link to comment
melody495 Posted November 16, 2023 Share Posted November 16, 2023 3 hours ago, bibo0903 said: Thank you so much!!!! It works! out of curiosity where did you get the data id? You are very welcome 🙂 You can download an extension called SquareSpace ID Finder. Please see below 🙂 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
KBrandStudio Posted August 14 Share Posted August 14 Hello! I'm having the same issue but the code shared isn't working in my case. You can see in the attached that there's a lot of padding on both sides and on the bottom. I'm hoping that this video won't have any padding/margins. Please advise! Here's the code I tried (website is: clarethibeau.com/services): section[data-section-id="yui_3_17_2_1_1718914272022_36865"] .sqs-block-video { .sqs-block-content, .intrinsic, .embed-block-wrapper, .sqs-native-video { position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; padding: 0 !important; } .video-player { padding: 0 !important; video { object-fit: cover !important; } } } 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