Bootstrap - Ratio

What is the Ratio Class?

The Ratio class is a Bootstrap utility class that manages the aspect ratios of videos or slideshows embedded in a web page. It provides a simple way to maintain the proper aspect ratio of the embedded content, regardless of the screen size or device on which it is viewed.

The Ratio class works by using percentage-based padding to create a responsive container for the video or slideshow. By setting the padding of the container based on the desired aspect ratio, the Ratio class makes sure that the embedded content scales proportionally within the container.

Here's how it works:

1. The .ratio class is added to a container element that wraps the video or slideshow.
2. The container is given a specific aspect ratio class, such as .ratio-16x9 or .ratio-4x3, which sets the appropriate padding-top value.
3. The padding-top value is calculated as a percentage based on the aspect ratio.

<div class="ratio ratio-16x9">
    <iframe src="https://www.example.com" title="Example Video"></iframe>
</div>

4. The video or slideshow element is placed inside the container and set to have a width of 100% and a height of 100%.

<div class="ratio ratio-16x9">
    <video src="your-video-source.mp4" width="100%" height="100%"></video>
</div>

By using the Ratio class, you can make sure that your embedded videos or slideshows scale properly and maintain their aspect ratios on different screen sizes. This is important for creating responsive designs that adapt to various devices, such as desktops, tablets, and mobile phones.

The Ratio class removes the need for manual calculations and adjustments to maintain the aspect ratio of embedded content. It provides a convenient solution for creating visually appealing and responsive video and slideshow embeds in your Bootstrap projects.

Using the Ratio Class

To use the Ratio class in your Bootstrap projects, apply the .ratio class to a container element that wraps the video or slideshow you want to embed. The container element can be a <div>, <section>, or any other appropriate HTML element.

Inside the container, place the video or slideshow element, such as an <iframe>, <video>, or <embed> tag. The video or slideshow element should have a width and height of 100% to fill the container.

Bootstrap provides several predefined aspect ratios that you can use with the Ratio class. These aspect ratios are represented by additional classes that you can add to the container element alongside the .ratio class.

To apply a predefined aspect ratio, add the corresponding class to the container element:

<div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/your-video-id" allowfullscreen></iframe>
</div>

The .ratio class creates a responsive container, and the .ratio-16x9 class sets the aspect ratio to 16:9, which is perfect for embedding a YouTube video.

If you have a specific aspect ratio that is not covered by the predefined classes, you can create a custom aspect ratio using inline styles. To do this, apply the padding-top property to the .ratio element and set its value to a percentage that represents the desired aspect ratio.

To create a 2:1 aspect ratio, use the following code:

<div class="ratio" style="padding-top: 50%;">
    <iframe src="https://www.example.com/your-slideshow" allowfullscreen></iframe>
</div>

The padding-top value of 50% creates a 2:1 aspect ratio container. The padding percentage is calculated by dividing the height by the width and multiplying by 100.

By using the Ratio class and applying the appropriate aspect ratio classes or custom inline styles, you can easily create responsive video and slideshow embeds that scale correctly on different screen sizes. This helps maintain the visual integrity of your embedded content across various devices.

Supported Aspect Ratios

Bootstrap's Ratio class has several predefined aspect ratios that you can use right out of the box. These aspect ratios cover the most common use cases for video and slideshow embeds. Here are the supported aspect ratios:

These predefined aspect ratios provide a quick and easy way to create responsive video and slideshow embeds without having to calculate the padding values manually. Simply add the desired aspect ratio class to the container element along with the .ratio class, and Bootstrap will handle the rest.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/your-video-id" allowfullscreen></iframe>
</div>

By using the .ratio and .ratio-16x9 classes, you ensure that the video maintains its 16:9 aspect ratio and scales properly on different screen sizes.

If your project requires a different aspect ratio that is not covered by the predefined classes, you can create a custom aspect ratio using inline styles, as explained in the next section.

Creating Custom Aspect Ratios

While Bootstrap provides predefined aspect ratios that cover common use cases, you may need to create a custom aspect ratio for your needs. The Ratio class lets you create custom aspect ratios using inline styles.

To create a custom aspect ratio:

1. Apply the .ratio class to the container element that wraps your video or slideshow.

2. Use inline styles to set the padding-top property of the .ratio element to a percentage value that represents your desired aspect ratio.

3. The percentage value for padding-top is calculated using the formula: (height / width) * 100.

<div class="ratio" style="padding-top: 50%;">
  <iframe src="https://www.example.com/your-content" allowfullscreen></iframe>
</div>

The .ratio class is applied to the container <div>, and the inline style padding-top: 50%; sets the custom aspect ratio to 2:1. The padding percentage is calculated by dividing the height (1) by the width (2) and multiplying the result by 100.

You can use this technique to create any custom aspect ratio you need. Calculate the appropriate padding-top value based on your desired aspect ratio and apply it to the .ratio element using inline styles.

Here are a few more examples of custom aspect ratios and their corresponding padding-top values:

By using inline styles to set the padding-top value, you have the flexibility to create any custom aspect ratio that suits your requirements. Remember to place your video or slideshow element inside the .ratio container to make sure it scales properly within the defined aspect ratio.

<div class="ratio" style="padding-top: 66.67%;">
  <video src="your-video-source.mp4" width="100%" height="100%"></video>
</div>

With the ability to create custom aspect ratios, you have full control over how your video and slideshow embeds are displayed, letting you tailor the presentation to your exact needs and design preferences.

Responsive Embeds

The Ratio class is useful for creating responsive video embeds that adapt to different screen sizes. When you embed a video on a web page, you want it to maintain its aspect ratio and fit within its container, regardless of the device or viewport size.

By applying the .ratio class to a container element and adding the right aspect ratio class, such as .ratio-16x9, you can create a responsive video embed. The Ratio class uses the padding-top trick to maintain the aspect ratio of the video container, while the aspect ratio class sets the correct padding percentage based on the video's dimensions.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/your-video-id" allowfullscreen></iframe>
</div>

In this example, the .ratio class is applied to the container <div>, and the .ratio-16x9 class sets the aspect ratio to 16:9, which is a common aspect ratio for web videos. The video <iframe> is placed inside the container, and it will automatically adjust its size to fit within the container while keeping the specified aspect ratio.

The benefit of using the Ratio class for responsive video embeds is that it prevents the video from becoming distorted or overflowing its container on different screen sizes. Without proper aspect ratio handling, a video might appear squished or stretched when viewed on smaller screens or when the browser window is resized.

By using the Ratio class, you can make sure that your video embeds scale proportionally and maintain their visual integrity across various devices and screen resolutions. This is important in mobile-first web design, where users access websites from a wide range of devices with different screen sizes.

The Ratio class handles the responsive behavior for you, so you don't have to write custom CSS or use complex media queries to handle different screen sizes. It provides a simple solution for creating responsive video embeds that look great on all devices.

Whether you're embedding videos from popular platforms like YouTube, Vimeo, or self-hosted videos, the Ratio class makes it easy to create responsive embeds that adapt to any screen size. By combining the .ratio class with the right aspect ratio class, you can make sure your videos are displayed correctly and provide a good viewing experience for your users.

Examples

To show how the Bootstrap Ratio class can create responsive video and slideshow embeds, here are a couple of examples.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/your-video-id" allowfullscreen></iframe>
</div>

<div class="ratio ratio-4x3">
  <iframe src="https://www.slideshare.net/slideshow/embed_code/key/your-slideshow-id" allowfullscreen></iframe>
</div>