Jump to content

How to display video in vertical format?

Go to solution Solved by tuanphan,

Recommended Posts

On 6/13/2023 at 10:53 PM, Panos_vsl said:

Can you share some info about this workaround on vertical videos please? Its June 2023 and this issue is still not fixed at all. 

I just solved a similar case a few days ago. If you share link to page where you use video, we can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
4 hours ago, tuanphan said:

I just solved a similar case a few days ago. If you share link to page where you use video, we can check easier

 

Hello , I have made a topic about it , trying to keep this info into one forum post.

If you can help with your css knowledge it would be amazing. Also maybe some admin should pin one of these because indeed vertical , square videos are , for better or worse, a standard now for social media. 

So I am sure this would be a very requested topic. 

 

 

Link to comment
On 6/13/2023 at 9:02 PM, Panos_vsl said:

this is such a big issue how is Squarespace not resolving this? 

We have vertical videos for many years now and many creators have both vertical and horizontal videos because of course MANY times a project will have both. 

I have both format videos on a page and its not clear at all how to actually resolve this. The chrome extension doesn't seem to show the IDs so i can try some of the solutions proposed here. 

 

We live in a world were vertical video is here to stay , come on Squarespace give us some kind of toggle within the video container!! 

 

Can anyone help? I will have this issue on several pages so if there is a solution i will follow it...

 

https://clover-vanilla-t98p.squarespace.com/excercitatio

pass: testing

 

Panos I see that you seem to have solved the issue by having both portrait and landscape videos on your sample page. May I ask how you did that? Thanks!

Link to comment
12 hours ago, Qamera said:

 

Panos I see that you seem to have solved the issue by having both portrait and landscape videos on your sample page. May I ask how you did that? Thanks!

Hello , 

 

So from what i understand you have to work on each video separately. So i got the Chrome extension that shows the IDs of all the items on the page and for each vertical video i will have to create a new CSS entry.

It might be a different way that is more efficient but am a complete noob on CSS i only find the resources. 

Here's a snip of what i used hope it helps: 

 

//Code for Vertical videos//

#block-yui_3_17_2_1_1686672595487_1473.video-block .video-player {padding-bottom: 120% !important;}

#block-yui_3_17_2_1_1686842161117_17601.video-block .video-player {padding-bottom: 120% !important;}

 

Link to comment
  • 2 weeks later...
On 6/18/2023 at 7:38 PM, Qamera said:

"this is such a big issue how is Squarespace not resolving this?"

I'm with Qamera - this issue should be solved (without adding any extra code). All social media sites accept vertical videos - this should be automatic with Squarespace by now.

 

 

Link to comment

The video container should have options so that you can define the some of the standard video formats that are available on popular media , content creators etc. 

16:9 / 9:16 / 1:1 / 4:3 / 3:4 

 

Is that such a complex request for the Video module to be implemented by Squarespace? Hope some moderators do watch the spaces so this issue gets resolved natively. 

 

 

Link to comment
  • 1 month later...
On 8/13/2022 at 10:18 AM, tuanphan said:

Try adding this to Design > Custom CSS to adjust ratio

.sqs-native-video .native-video-player {
    padding-bottom: 100% !important;
}

 

Hi everyone, I am having the exact same issue. I can't believe Squarespace is not providing a built-in solution for vertical videos, so any help would be much appreciated:

 

In my website I want to publish both vertical and horizontal videos. If I use this code, it alters all the videos, (including horizontals and that's a problem since one of the videos is sort of full screen so I have a lot of empty space above and below it. 

Also, when I use this code, I don't know why, but the vertical video malfunctions, it doesn't load correctly and bugs. 


Any help? Thanks!

 

Here's the website: 

https://www.pabloalbarenga.com/memories-of-the-river

Link to comment
  • 2 months later...

Hi. I have a 5x4, 1080x1350 video and I want to do round corners. But I can get the correct padding-buttom or may be I need to do another thing. The border of the video and frame does't match exactly and the corner is not totally round. It is almost but not perfect.

this is my code:

#block-yui_3_17_2_1_1699787501791_18687 .sqs-native-video .native-video-player {
    padding-bottom: 68% !important;
}
.video-player .plyr--video {
    border-radius: 14px;
}

Link to the page:

https://dragonfly-viola-2b6c.squarespace.com/0107

Is the third section. The one with the vertical format. 

image.thumb.png.af111208053679a29fe83e5f2f029a0e.png

 

Edited by Marcelox
Link to comment
  • 4 weeks later...
On 12/24/2023 at 6:52 AM, heytyleraustin said:

This code below from this thread worked for me, but today I noticed it stopped working after months of working perfectly. Any ideas? The video is on my website homepage under the "Coachella Partnership" section.

.native-video-player.video-player {
    padding-bottom: 100% !important;

Your code missed a closing } symbol

.native-video-player.video-player {
    padding-bottom: 100% !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.