Embed vertical video without huge black borders?

So, I want to embed an up-loaded/local  vertical video, but videos are only presented in portrait format, making the vertical video tiny with massive borders. Looks silly and unprofessional, in contrast to the rest of my SS website (See: https://www.guyriddihough.com). There is a fix where I can add some code to the CSS panel for my site (see: https://bycrawford.com/blog/how-to-add-a-vertical-video-on-squarespace). Here is the code:

.sqs-native-video .native-video-player

.sqs-native-video .native-video-player {

padding-bottom: 100% !important;

}

However, when I add this code (and nothing else) to the CSS panel (in the Design section) nothing changes for the video. I am failing to do something. Do I have to specify the page where the video is present? Or something else? As you can already guess, I know nothing about coding websites. (That's why I am a SquareSpacer.) Any help would be very gratefully received...

Griddiho (the Noob)

Hi,

Can you share link to page where you have problem? We can check code easier

Hi tuanphan, you will find the video on the main page of my SS website: https://www.guyriddihough.com

Any suggestions for how to make it bigger so the text could be read, for example, would be very welcome! Best, GR

On 6/7/2023 at 2:02 PM, Griddiho said:

So, I want to embed an up-loaded/local  vertical video, but videos are only presented in portrait format, making the vertical video tiny with massive borders. Looks silly and unprofessional, in contrast to the rest of my SS website (See: https://www.guyriddihough.com). There is a fix where I can add some code to the CSS panel for my site (see: https://bycrawford.com/blog/how-to-add-a-vertical-video-on-squarespace). Here is the code:

.sqs-native-video .native-video-player

.sqs-native-video .native-video-player {

padding-bottom: 100% !important;

}

However, when I add this code (and nothing else) to the CSS panel (in the Design section) nothing changes for the video. I am failing to do something. Do I have to specify the page where the video is present? Or something else? As you can already guess, I know nothing about coding websites. (That's why I am a SquareSpacer.) Any help would be very gratefully received...

Griddiho (the Noob)

 

 

Try this code

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

hi! I just tried this and it worked for my video so thank you! However, it did make any text added next to it have an incredibly long text box that basically makes a large gap under the video before whatever comes next on my page. It doesn't show the gap on mobile, only desktop but won't let me make the text box smaller despite there being no text there. Thoughts? 

15 hours ago, KP11 said:

hi! I just tried this and it worked for my video so thank you! However, it did make any text added next to it have an incredibly long text box that basically makes a large gap under the video before whatever comes next on my page. It doesn't show the gap on mobile, only desktop but won't let me make the text box smaller despite there being no text there. Thoughts? 

 

Can you share link to page where you have problem?