Cinema stack responsive design problem

Hi everyone,

I am using Foundry and the cinema stack. Now I am having the problem that the inserted video don’t adjust the height of the video to the different devices (MacBook/iPhone X/ iPad Pro) How can that be fixed? What could be the issue here?

Thanks for your help.

Hi there @Lar365 – You’ll have to provide a bit more detail, and a live URL at a minimum for us to see, in order for us to assist you.

The video you use does not change the size of the Cinema tool. The size is determined by the contents you put inside of Cinema, as the Cinema tool is meant to be a background looping video. It is hard to help further though without more details and a URL.

Hi @elixirgraphics

Attached I am sending a link for downloading the problem file.

Maybe it is helpful to find a suitable solution for my problem. The main issue here is that the content does not adapt (not responsive to the different devices).

Thanks.

The issue resides in the way you’ve chosen to configure Cinema. If you look at the settings you’ve chosen, below, you’ll see you’ve got fixed heights chosen for each of the breakpoints. You can read about the height settings in the Documentation.

I personally would opt for flexible heights and add a Margins tool for adjusting the padding at each breakpoint where needed.

2 Likes

Thanks a lot your your reply @elixirgraphics

I tried to set everything to “Mobile: Cinema is set to a fluid height at the Mobile breakpoint.” for example. But still the video is completely cropped/zoomed in … How can I fix that? Should I then set breakpoints at the mobile version or how should I proceed than that the video will be responsive to the different devices?

All videos within Cinema will be cropped or scaled. This is by design as it is acting as backdrop for the content you place inside of it. This is how it has to work in a responsive environment.

Yeah I understand. But still I don’t know how I can the issue that the sizing will be different regarding the devices. That the content of the video won’t be scaled so that it can’t be seen. How can I size the video inside Rapidweaver somehow?

You cannot size the video. As I said it is cropped and scaled automatically to cover the entirety of the background as the viewable width of the page changes. This is how this tool is designed to work. If this is not what you want then this tool is not the right choice for the task you’re attempting to accomplish.

Ok.
So, I have a Video (1920 × 1080) and now want to implement that video as a loop video as a banner to my foundry website that adapts responsive to the different devices. I am not sure how to fix my plan. Is there an opportunity or a suitable stack?

If you want the banner of the page to be responsive then Cinema will accomplish this task. A looping video background in such a situation is meant to be cropped, etc. as that is how it accommodates the content within the banner and resizes appropriately at the same time. Since Foundry is a responsive set of tools that is the only video background tool it offers.

1 Like

There are some stacks that have a setting where the height is proportional to the width. So, for example, with a 16:9 (your video ratio), the height would be 56.25% of the width. The one coming to mind is Sections Pro by Big White Duck (which works well with Foundry) but I’m not at my RW computer to check what others do this.

Having said that, you sort of have to decide what the focus of your content is. If it is the full video, a background video stack likely isn’t your tool? You could just embed the video as you normally would with any of the Foundry video stacks.

Ok thanks. I hope to find a suitable solution.

Alright, that sounds good. And how do I need then to adapt it? It the full video yeah. But the problem is that the video stack from foundry needs to have the video uploaded on YouTube or Vimeo. So I can’t use it when I have the video just saved local I think. right?