Vertical video frame config on Stacks Foundry 3

[lucovan]

Hello there! Hope everyone is doing great.

Today i’m here to ask for some help. What should I do to set the video frame from the video stack in foundry 3 in a vertical aspect ratio and not the default horizontal ratio?

Basically I want to get rid of the white spaces in the sides of the video.

I would like to limit the video frame to the file ratio.

[elixirgraphics]

Hi @lucovan – Could you share your project file, and video with me so I can take a look for you and see if something is possible?

Create a ZIP file containing your project file (and the video file). The project file is the file you open in RapidWeaver to edit your site. After creating the ZIP file, upload it using a service like Dropbox, WeTransfer, Droplr, or a similar service to create download link for us. Paste that download link in your reply.

[lucovan]

Adam! Thanks for the quick answer.

Here goes the file: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

Let me know if I can be more precise or useful with something.

[elixirgraphics]

By chance did you change something before sending me your project file? This is what I’m seeing here: https://d.pr/v/4mMTiL

[lucovan]

Sry sry! I send you the wrong one.

Gonna send you the one im working in now

Basically I want the video to display as one of the other elements.

File: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

[elixirgraphics]

First thing I’ll say is this – the content in those other columns can change their length, your video cannot. This means the video, even in a vertical form, will only match the shape of those other columns in very precise circumstances. If it were me, I wouldn’t do it myself. Additionally, people don’t prefer watching vertical videos

That said, the file you sent – the video is still horizontal on my end of things:

[lucovan]

Ok so there is not a way to let a video being display in it original aspect ratio, it will always take it to the 100% width which trims some parts of the content or it will be shown with sidebars… That’s right?

I’m not interested in the analysis of what people prefer because I want to integrate this as a content resource with movement and not a proper video content to been watched as in YouTube.

Thanks anyway Adam. I’m going to keep trying to find a way.

[elixirgraphics]

@lucovan

Ok so there is not a way to let a video being display in it original aspect ratio, it will always take it to the 100% width which trims some parts of the content or it will be shown with sidebars… That’s right?

No, that is not what I was describing. Videos can have a force ratio set on them. This is what I was attempting to help with yesterday, but both project files I received had horizontal videos, as shown in my screenshots.

As for the other content – the text in those columns will vary in height. That’s the nature of text in a responsive environment. It will get longer or shorter and it, meaning the text, will not stay in a ratio to match your 9:16 video. That is why it felt like an errand that would be better solved in other layouts. If you’re stuck on making it work, I’ll leave you to it. Just wanted to offer my feedback and advice as a website designer.

[lucovan]

Oh ok I undestand. Actually the video it’s 9:16 thats why im trying to change the ratio. If you go to PIP mode, you will see.

The video is horizontal in the file i send you because its the way its displayed when you drag and drop the video intro de video stack.

Could you please explain me how I can force video ratio set on the video stack?

[elixirgraphics]

You would need to provide your own custom CSS to add an aspect ratio to a video. It is not a feature of the Video tool.

[lucovan]

Adam! Sry to bother you again with this. But it sounds a little incredible to me.

We can conclude that the video stack doesn’t show the video in the original file aspect ratio?

[elixirgraphics]

If you provide me the project file, and the video file, I will be glad to take a look, as I’ve mentioned before. The files you’ve sent me previously did not contain the video, only the project, and both times the already embedded video was not a vertical one. I can’t say whether the problem if the video or the Video tool without having those things on hand to examine and troubleshoot.

[lucovan]

Oh I didn´t understud that! Sry Adam. I share you here the project and the video embeded.

Sew.mp4

[elixirgraphics]

Add this class name to your video:

Then add this CSS to the custom CSS field in the Page Inspector:

.video-aspect-ratio,
.video-aspect-ratio video {
	height: auto !important;
	aspect-ratio: 9 / 16 !important;
}

Like so:

I’d have done it with Blacksmith, but at this time Blacksmith doesn’t have an auto setting for height.