Jump to content

How to Make a Video Block Fill the Frame

Go to solution Solved by jpeter,

Recommended Posts

Hi, I am wondering if there is a way to have my video fill the full size of the frame (the same way an images does)? I am currently using this code:

#block-yui_3_17_2_1_1705927316935_8707.video-block .video-player{
padding-bottom:61%
}

But it isn't very precise, no matter what I change the percentage to.

This is for a portfolio page and we need all the images to align. I have attached screenshots to show this. Is there custom code to allow a video block to act like an image block and fill the frame, cropping off anything that falls outside of the frame so that it can be responsive (exactly like the image blocks do)?

Any help or suggestions would be greatly appreciated.

Thanks, Chris

https://bugle-dory-srgh.squarespace.com/ni-opera

Pass: parttwo

Screenshot 01.jpg

Screenshot 02.jpg

Link to comment
  • Solution

@PartTwoDesign You can use the following CSS that adds height of 100% to some of the containers and then overrides the object-fit property from contain to cover

#block-yui_3_17_2_1_1705927316935_8707.video-block > .sqs-block-content,
#block-yui_3_17_2_1_1705927316935_8707.video-block .intrinsic,
#block-yui_3_17_2_1_1705927316935_8707.video-block .embed-block-wrapper,
#block-yui_3_17_2_1_1705927316935_8707.video-block .sqs-native-video {
  height: 100%;
}

#block-yui_3_17_2_1_1705927316935_8707.video-block .video-player {
  padding: 0;
}

#block-yui_3_17_2_1_1705927316935_8707.video-block video {
  object-fit: cover;
}

Working example:

 

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

@PartTwoDesign It looks like you may have been trying to divide the sections using, -----------------------, but the appears to be breaking the CSS. If you want to divide the section of CSS, use a CSS comment insead by adding an opening /* and closing */ like so: /* ---------------------- */

Here's a video deleting the divider using Chrome dev tools and that fixes the issue:

 

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
  • 3 months 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.