Feature request: Make Cinema Stack more responsive


The following Javascript removes the top and bottom gaps, when rescaling the browser window.

#cinema_wrapper video {
	object-fit: cover;	

This one forces the height to 90% of the current view port:

#cinema_wrapper {
	height: 90vh !important;	

Would be nice to see these 2 option going into the next update :slight_smile:

You can see these 2 patches in action here:

Thank you very much,


Hi @hschneider

I have not run into any gaps when rescaling the browser using Cinema. If you can send me a ZIP file containing a project file, along with your video files and poster image file, that recreates this problem I’d be glad to take a look at it.

Here’s an example of the Cinema Stack in action with its default settings for reference: https://elixirgraphics.com/test/cinema-example

The Cinema stack is not designed to act as a “hero” banner. I’ve run into problems with users grasping the “hero” banner settings in the Banner stack in the past, which makes me shy away from adding it in another stack. If this is something you need or want though then by all means employ the code you’ve written to do just that. :+1:

Out of curiosity, why stop at 90vh and not go to 100vh instead? In your example the last 10% looks like a mistake on the page, IMHO.


I use a red, semi transparent overlay, which shows gaps on the top and the bottom. I will send you a link to the the project file later on.

Viewport: Sure, you can use 100vh as well. 90vh just fit the project mentioned.


The sample I linked to has a dark grey overlay as well. It shows no gaps. Did the gaps only show when you set the viewport to 90vh?


Just replied to your Direct Message.

I am headed out of the office in a bit, but I will check back in before the end of the day.


Hi Harald - auf der Seite überschneiden sich Menü und Warenkorb auf dem iPhone. Das Menü ist nicht aufrufbar.


Danke für den Hinweis - der Menübutton sollte eigentlich gar nicht da sein, da leer.

closed #8