How to display video in vertical format?

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

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. 

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!

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;}

The problem is now the grey overlay of the video container. I am not sure how to edit that at the moment. 

On 6/19/2023 at 8:08 AM, Panos_vsl said:

The problem is now the grey overlay of the video container. I am not sure how to edit that at the moment. 

 

 

Same issue cropping up for me. Has anyone found a solution?

3 hours ago, bigcactuslabs said:

Same issue cropping up for me. Has anyone found a solution?

Nevermind, this was solved here: 

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.
 

On 6/24/2023 at 12:35 AM, bigcactuslabs said:

Nevermind, this was solved here: 

 

thank you that was what I needed. 

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. 

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

On 7/3/2023 at 8:26 AM, JimCerone said:

 

YES, it seems somewhat insane for vertical/portrait videos to not have native support! How many people are spending how many hours to learn how to do this, when it seems like it should be a no-brainer.

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. 

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;

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;
}

@tuanphan Awkward...thank you so much! I must've deleted that while trying to make a single-page footer via CSS.

Hello! Its really weird you can't change the aspect ratio just from the video block options immediately.

How can I have both horizontal and vertical video on my site without google extension. I am working on safari.

Thank you

Hi all, towards the bottom of https://www.visualspectrum.ch/ausgewaehlte-hospitality-und-hotel-interior-fotografie I embed a vertical video. In desktop mode the display is okay, although also there I am unable to move the video more towards the right edge of the screen because of the 16:9 container ("field) it is dropped into. The bigger issue is on mobile view though, where the video displays way too small. It should be as wide as the photos below and above. I am thinking I need a vertical container, then both issues would be resolved.? How can i do this? Thanks a lot for your help

You mean this video?

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1711831694026_15313 .video-player {
    padding-top: 90% !important;
}
}

On 4/7/2024 at 11:29 AM, tuanphan said:

You mean this video?

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1711831694026_15313 .video-player {
    padding-top: 90% !important;
}
}

 

@tuanphan many thanks, and yes, this is the video in question. your suggestion improves the display of the video, but still it doesn't fill the screen the way the images do. i attach a screenshot, you can see the video is wider and larger but still has more padding than the images above and below. this screenshot is with tweaked values (max-width to 3000 px and padding parameter to 100%) but that didn't translate to a visibile improvement. Oh and yes, on desktop it of course now makes the video huge, so that cannot be the solution. Any thoughts? Thanks very much

On 4/10/2024 at 5:23 PM, miketerranova said:

@tuanphan many thanks, and yes, this is the video in question. your suggestion improves the display of the video, but still it doesn't fill the screen the way the images do. i attach a screenshot, you can see the video is wider and larger but still has more padding than the images above and below. this screenshot is with tweaked values (max-width to 3000 px and padding parameter to 100%) but that didn't translate to a visibile improvement. Oh and yes, on desktop it of course now makes the video huge, so that cannot be the solution. Any thoughts? Thanks very much

You can use this CSS code under

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1711831694026_15313 video {
    object-fit: cover !important;
}
.fe-block-yui_3_17_2_1_1711831694026_15313 {grid-column-start: 2 !important;grid-column-end: 10 !important;}
}

1 hour ago, tuanphan said:

You can use this CSS code under

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1711831694026_15313 video {
    object-fit: cover !important;
}
.fe-block-yui_3_17_2_1_1711831694026_15313 {grid-column-start: 2 !important;grid-column-end: 10 !important;}
}

 

@tuanphan thank you again, this is taking care of the width on mobile, but now there is a new issue with the height of the video being cut, see the attached screenshot

On 4/13/2024 at 5:04 PM, miketerranova said:

@tuanphan thank you again, this is taking care of the width on mobile, but now there is a new issue with the height of the video being cut, see the attached screenshot

Use this code under

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1711831694026_15313 .native-video-player.video-player {
    padding-top: 90% !important;
}
}

@tuanphan thanks again. Now we are back where we were in the beginning, it's displaying the entire video but it is no longer going as wide as the photos above and below (always talking about mobile view). Is there no way to have both?? 

On 4/19/2024 at 5:10 PM, miketerranova said:

@tuanphan thanks again. Now we are back where we were in the beginning, it's displaying the entire video but it is no longer going as wide as the photos above and below (always talking about mobile view). Is there no way to have both?? 

Did you remove previous code? You need to keep both code, and add new code under previous code