Jump to content

how to remove padding of video box when resizing browser

Go to solution Solved by JayVanDyke,

Recommended Posts

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! 

 

 

Screenshot 2023-09-28 at 19.22.17.png

Link to comment

Link to the page please.

Videos are meant to stay at whatever aspect ratio and trying to get them to fit can be fiddly. 

Link to the page and tag me though so I can take a look.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Still seems to be no password setup to view it. I've done this on another client's site but I need your live page to do it a little easier.

Go to Settings > Site Availability > Password Protected

Then enter your password you want and save.

Screenshot 2023-10-04 at 1.28.46 PM.png

Screenshot 2023-10-04 at 1.30.50 PM.png

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment
  • Solution

Ahh yea....sorry it was trying to load your editor instead of the page. I should have realized but not enough coffee today maybe 🙃

Try this

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

    }
}

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment
  • 5 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.