Jump to content

How do I change the width of my video while keeping the length the same?

Recommended Posts

Hello,

Is it possible to lower the width of video size while keeping the length long so I end up with wide video? I shoot and edit all my video in ultra wide but when I upload it puts it in a 1920x1080 size block which looks wrong and the scrub bar is way to far down the video. I've tried with youtube too but having the same problem. Is there some code I can use to fix this?

 

I have got as far as this code:  

#block-id {
  padding: 17px 0px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

 

but there is only option for width and not length.. sorry if its obvious I'm still pretty new to this. Thanks!

Link to comment
  • Replies 4
  • Views 396
  • Created
  • Last Reply

Top Posters In This Topic

Could you insert here your website's url? What do you mean by length? You mean the duration of the video or the height? Or you are actually referring that even if you change the width of the video container the inner video has black around it on the inside.

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
19 hours ago, joseph81 said:

Could you insert here your website's url? What do you mean by length? You mean the duration of the video or the height? Or you are actually referring that even if you change the width of the video container the inner video has black around it on the inside.

Thanks for replying, here is the URL with the video:

https://www.filmbyria.com/films/keelan-kita

By length, I mean standard HD videos are 1920x1080 pixels, but mine I export 1920x700, so the width is much shorter than normal, giving it an ultra wide effect. I hope that makes sense? I cant see any option it resize my video block!

Link to comment
.video-player .plyr video
{
    object-fit: cover;
    object-position: center right;
}

.video-player .plyr__poster {
    background-size: cover;
    background-position: center right;
}

You can make the video fill the video-block area with the above code. Also I centered it right because of the title at the begining to be visible. You have a really wide video there, this should be resolved in the export phase. 

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

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.