How to display video in vertical format?

Site URL: https://www.clipsk.com/test

I'm trying to embed or upload videos displayed in vertical / 9:16 aspect ratio but I can't find a way to make it work.

The video block always shows up in standard widescreen format.

If I use an embed block and define aspect ratio in pixels in the embed code, the video flows outside of the container/block.

https://www.clipsk.com/test

Try adding this to Design > Custom CSS to adjust ratio

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

Thank you @tuanphan – this did the trick for uploaded/native Squarespace video!

Is it possible to do a similar solution for embedded videos?

On 8/16/2022 at 4:56 PM, Maniola said:

Thank you @tuanphan – this did the trick for uploaded/native Squarespace video!

Is it possible to do a similar solution for embedded videos?

Can you share link to page where you use embed video?

@tuanphan 

Yes! There are examples in both classic editor and fluid engine on this page: https://www.clipsk.com/test

18 hours ago, Maniola said:

@tuanphan 

Yes! There are examples in both classic editor and fluid engine on this page: https://www.clipsk.com/test

Try this CSS

.fe-block .embed-block iframe {
    width: 100% !important;
    height: 350px;
}

On 8/13/2022 at 5:18 PM, tuanphan said:

Try adding this to Design > Custom CSS to adjust ratio

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

 

can you apply this to certain videos? when i added it to my CSS it changed all videos on the website from horizontal to vertical.

On 8/28/2022 at 1:20 PM, Faten said:

can you apply this to certain videos? when i added it to my CSS it changed all videos on the website from horizontal to vertical.

Target with video block id.

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

Find ID with this tool: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

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

Try adding this to Design > Custom CSS to adjust ratio

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

 

Hey, thank you for this!  This worked, but the video player is wider than the video. How could I match the width? How do I apply it to only videos that I upload that are vertical, the CSS above didn't seem to do the trick. 

On 8/27/2022 at 11:20 PM, Faten said:

can you apply this to certain videos? when i added it to my CSS it changed all videos on the website from horizontal to vertical.

Did you ever figure out the code to change only videos that are vertical to vertical? 

here you go.

.video-block { 
    .video-player {
       padding-bottom: 125% !important
    }
}

am i doing something wrong?

the widht is still not matching the video when it plays

Hello!

How can this be done for mobile?

Thanks