Jump to content

How to adjust the size of a video block to be 2400 x 256 px?

Go to solution Solved by tuanphan,

Recommended Posts

I have a video with sponsor logos, and I would like it to loop continuously. It has dimensions of 2400x256px, but when I try to add a video block, it appears to be excessively large, and I am unable to adjust it to the video dimensions. I have already tried the following solutions:

#block-yui_3_17_2_1_1716279960748_84123.video-block .video-player {
    padding-bottom: 10.67%; 
}

 

and 

 

 

#block-yui_3_17_2_1_1716279960748_84123.video-block .video-player {
    width: 100%;
    max-width: 2400px!important;
    height: 256px!important;
}

#block-yui_3_17_2_1_1716279960748_84123.video-block iframe,
#block-yui_3_17_2_1_1716279960748_84123.video-block video {
    width: 100%;
}


Various codes of this type as above also did not work.

The website: 
www.toleasing.pl
p: toleasing


I want it placed like on the screenshot attached. 

Thanks in advance 🙂

Zrzut ekranu 2024-05-22 o 12.31.33.png

Link to comment
  • 2 weeks later...
  • Solution

I found the logos in the video a bit shaky

Also, you can achieve autoscroll logo with this guide, no need to use video

But if you still want to use Video, use this CSS code

div#block-yui_3_17_2_1_1716279960748_96623 .video-player {
    padding-top: 20% !important;
}
.fe-6638d79b51eebb396d58a873 {
    grid-template-rows: repeat(2,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

image.thumb.png.cba4f9451484461559f12d5d12b8b881.png

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
  • 2 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.