How to display video in vertical format?

@tuanphan this is what the code looks like, is there a mistake in the syntax somewhere? 

On 4/21/2024 at 5:56 PM, miketerranova said:

@tuanphan this is what the code looks like, is there a mistake in the syntax somewhere? 

Need 2 }} symbols here, not 1

@tuanphan hi again, thank you. I changed it, and it still does not display the video properly, see the attached screen recording. Why is it cutting the video in the height? 

On 8/13/2022 at 9:18 AM, tuanphan said:

Try adding this to Design > Custom CSS to adjust ratio

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

 

Yeah, this totally worked for me. Here's my embed code... prob not clean, but it works:

<iframe height="1920" width="1080" src="https://www.youtube.com/embed/YOUTUBE-CODE=HERE?vq=hd2160&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" .sqs-native-video .native-video-player {padding-bottom: 100% !important;} allowfullscreen></iframe>

To adjust height, adjust this number

Im in the middle of building my website atm, so its not public yet, but Im strugglign a bit to turn my video blocks into vertical videos. at least a vertical ratio of 9:16.

I've copy and pasted this code for custom css but nothing is changing and I get this message 

.video-block .video-player{
padding-bottom:115%
}
 

You can use a video resizer and then add the video on to your website. You can use this online tool : https://clideo.com/resize-video you will be able to resize your video to any ratio that you need. 

21 minutes ago, Sam0smith said:

You can use a video resizer and then add the video on to your website. You can use this online tool : https://clideo.com/resize-video you will be able to resize your video to any ratio that you need. 

Thank you for this but maybe I should have worded my post differently. I want to change the padding of the video block to a more vertical video since all the videos I'm uploading are vertical (edits made for social media) 

I've brought this issue in the past and I am not sure if there are any considerations for this feature to be added sometime in the future.
I've been using Etsy and it has been way more helpful to sell on that platform than through SS. Mainly because its possible to upload videos in horizontal and vertical ratios, and this is important because sometimes people are able to make better buying choices by watching videos.

I have an advanced plan and only having the option to use Horizontal ratio for portrait videos and 30 minutes total length in video capacity is highly unacceptable.

I've tried to test a couple of the codes provided here and paste them on the Custom CSS space with no luck....

I'm trying to display a vertical (9:16) video on my homepage but the player keeps on coming up in wide format:

TOR DIVIDE

(the video is on the left after scrolling a bit down)

Is anyone able to help please?

@tuanphan apologies for asking once again for your help, I tried to use this code:

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

to show a vertical video player for a video on this page: tordivide.co.uk

but without any luck 😞

Any chance you'd be able to help me?

10 hours ago, ValeTor said:

@tuanphan apologies for asking once again for your help, I tried to use this code:

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

to show a vertical video player for a video on this page: tordivide.co.uk

but without any luck 😞

Any chance you'd be able to help me?

You mean both videos on the page? And on desktop only?

Hi @tuanphan no sorry I meant only the vertical video (on both desktop and mobile).

The second, horizontal, video is fine as it is, but the vertical one comes up very small and with an horizontal player which looks odd.

Ideally I'd like to extend the vertical video so that it takes more space vertically, without filling up the whole page horizontally (I hope that makes sense).
At the moment if I try to make the video bigger, I have to extend the horizontal player which takes the whole screen.

I think the block ID is yui_3_17_2_1_1732538986875_39500

14 hours ago, ValeTor said:

Hi @tuanphan no sorry I meant only the vertical video (on both desktop and mobile).

The second, horizontal, video is fine as it is, but the vertical one comes up very small and with an horizontal player which looks odd.

Ideally I'd like to extend the vertical video so that it takes more space vertically, without filling up the whole page horizontally (I hope that makes sense).
At the moment if I try to make the video bigger, I have to extend the horizontal player which takes the whole screen.

I think the block ID is yui_3_17_2_1_1732538986875_39500

Did you solve? It look already fine