Video container vertical/horizontal

Please i need some help on handling vertical AND horizontal video.  A way to contain both formats 16:9 and 9:16 on one page.

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

pass: testing 

I hope Squarespace is watching this space , it makes NO sense in 2023 trying to place a video in your website and having to sieve through CSS solutions that sometimes work sometimes no...

There are countless creators that produce content on 16:9 , 9:16 , 5:4 , 1:1. 
The video container should have the basic video needs of today's media.  The whole direction of social media platforms is heavily based on vertical media and we are trying still to find workarounds on one of the most premium website build platforms worldwide.  There should be some kind of toggle or selection for the video container that dictates format. 

After looking into some of the solutions it seems that the best practise would be to target each video of the website individually. 

However there are still some issues that i hope some clever CSS wizard can edit.  The issue is that even though the container can almost match the video's dimensions there is a gradient ramp with grey colour on the bottom in order to show the video controls. 

Is this gradient editable? Can it be removed? 

Hi! Been trying to read along the treads but still can't figure out how to get 9x16 videos to play on my pages. Love what you did on your site, can you share how you go both 9x16 and 16x9s on your pages?

Thank you!

Carolyn

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