Cinema loops your video in the background, behind your content, to create a beautiful ambiance. Create cinematic video backgrounds for your content, or use them as a page banner background.
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
Be sure to watch our Cinema Tutorial video above to learn not only how to use Cinema but also how you'll need to convert your videos for use in this tool. This video's important, so if you plan on using Cinema, please do not skip it.
Cinema now has more overlay options, the ability to add rounded corners and drop shadows, and more.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
The Poster Image is used for displaying to the visitor prior to the video beginning if there is a delay. It is much easier and faster to load an image as the Poster Image placeholder for the video until it is played. Drag-and-drop your Poster Image here to add it to your background video.
Here we have controls for linking up your self-hosted video files. The tutorial video for the Cinema tool walks your through how to use these controls as well as offers advice on converting your videos to the needed formats.
Here you can choose whether the height of the Cinema tool will be fluid, or responsive. The latter allows you to set fixed heights at each individual responsive breakpoint.
The Fluid height mode allows the Cinema background video to adjust its height based on the content you've placed within its content container. This also allows it to adjust based on the width of the display or device.
In Responsive mode the height is set manually on a per-breakpoint basis. Each of the 6 breakpoints gets its own height setting. You're also given the ability to adjust the units used for these height values.
When using the Responsive height mode you're also given the ability to tell the Cinema tool how you'd like your content within its content area to be aligned vertically.
Cinema allows you to add an overlay on top of the looping video, and behind its contents. Below is a list of the available options for the Overlay.
Provides a color picker that lets you choose a solid color for the Overlay. The color picker also provides an opacity slider which lets you adjust the opacity of the Overlay color.
Choosing Gradient mode gives you two color pickers for choosing the Overlay's gradient styling. You're also given a control for fine tuning the angle of the gradient as well. Each color picker has an opacity slider for adjusting the translucency of the colors.
Gives you a drop zone for adding an image that will be tiled on top of the looping video. When creating your tiled image it is important to use an image with translucency so that the video can be seen through it.
Allows you to apply a blur to content behind the Overlay. This can often make the content within Cinema easier to read. You're also given a control for adjusting the amount of blur that is applied.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
Used to add a decorative shadow to this tool. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.