Help! Remove padding of video box when resizing browser

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

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. 

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;
    	}

    }
}

Hi, please share a link to your website so can check

4 hours ago, melody495 said:

Hi, please share a link to your website so can check

Yes sure, it's chloeramli.com !

Thank you so much!!!! It works!

out of curiosity where did you get the data id? 

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 🙂