Jump to content

Video block padding / filling the block

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution

Try this code to Custom CSS box

@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1708106732776_3438  video {
    height: auto !important;
}
div#block-yui_3_17_2_1_1708106732776_3438 {
    justify-content: flex-start !important;
}
div#block-yui_3_17_2_1_1708106732776_3438 .native-video-player.video-player.video-player--medium {
    padding-top: 102% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi @tuanphan,

This is very nearly perfect, except the video on the left is slightly longer than the image on the right. See screengrab. I thought a work around is to put a white box over the bottom of the two images (see screengrab) so they look aligned but wondering if there was a better way with code.

Thanks
Laura

Screenshot 2024-02-17 at 15.50.15.png

Screenshot 2024-02-17 at 15.50.37.png

Link to comment

Yes. Use your way or limit height, something like this

@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1708106732776_3438 {
video {
    height: auto !important;
}
& {
    justify-content: flex-start !important;
    max-height: 900px;
    overflow: hidden;
}
.native-video-player.video-player.video-player--medium {
    padding-top: 102% !important;
}}}

If video > 900px will hide some at bottom of video

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I tried this, which does make everything bigger but it does not keep everything in its container, it just makes the page wider. I wonder if there's some code to add so that it stays in the container or the padding gets deleted?

/* resize mobile video */
@media screen and (max-width:767px) {
#block-yui_3_17_2_1_1707902563468_6402 {
    width: 150%;
    margin: 0 auto;
}
#block-yui_3_17_2_1_1707902563468_6402 {
    width: 150%;
    margin: 0 auto;
}
}

 

Link to comment

I've figured this out, I used this for mobile on a few different video blocks and this has worked to make them bigger. I just adjusted the padding figure to make them bigger or smaller.

@media screen and (max-width:767px) {section[data-section-id="65c647115dbb9c51b53ba6e1"]
  .sqs-native-video .native-video-player {
    padding-top: 80%;
  }
  }

Link to comment

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.