Video Containers

Trongate CSS provides utility classes to help you embed videos responsively. The .video-container and .video classes work together to ensure embedded videos maintain proper aspect ratios and remain responsive across all device sizes.

Basic Implementation

To embed a responsive video, wrap the <iframe> in a container with the .video-container class, and add the .video class to the <iframe> itself. For example:

Note: The width and height attributes are intentionally omitted from the <iframe> tag as the CSS rules dynamically control the dimensions to ensure responsiveness.

Different Aspect Ratios

While the default aspect ratio is 16:9, you can specify different ratios using modifier classes:

How It Works

The video container classes use CSS custom properties to maintain the correct aspect ratio. The key is the padding-bottom value, which is calculated based on the aspect ratio:

By combining the .video-container and .video classes, your videos will maintain their proper proportions and adapt seamlessly to different screen sizes.