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.

Example: 16:9 Aspect Ratio

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

A 16:9 aspect ratio would have a padding-top value of 56.25% (9 / 16 * 100).

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

Example: Video Element Inside a Container

<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.

Aspect Ratio Class Description
.ratio-16x9 Sets the aspect ratio to 16:9, which is widely used for video content, such as YouTube videos or Vimeo embeds.
.ratio-4x3 Sets the aspect ratio to 4:3, which is commonly used for older video formats or slideshow embeds.
.ratio-1x1 Sets the aspect ratio to 1:1, creating a square container that can be useful for certain types of content.

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

Example: Applying 16:9 Aspect Ratio

<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:

Example: Creating a 2:1 Aspect Ratio

<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:

Class Aspect Ratio Description Padding-top Value
.ratio-1x1 1:1 Sets the aspect ratio to 1:1, creating a square container. Useful for embedding content with equal width and height, such as square images or certain types of videos. 100%
.ratio-4x3 4:3 Sets the aspect ratio to 4:3, commonly used for older video formats and slideshow embeds. Widely used in traditional television screens and computer monitors before the widespread adoption of widescreen formats. 75% (3 / 4 * 100)
.ratio-16x9 16:9 Sets the aspect ratio to 16:9, the most popular aspect ratio for modern video content. Widely used for high-definition (HD) videos, such as those found on YouTube, Vimeo, and other video sharing platforms. Provides a widescreen viewing experience and is the default choice for most video embeds. 56.25% (9 / 16 * 100)
.ratio-21x9 21:9 Sets the aspect ratio to 21:9, an ultra-wide aspect ratio commonly used for cinematic content. Wider than the standard 16:9 ratio and provides a more immersive viewing experience. Often used for movie trailers, cinematic videos, or showcasing panoramic content. 42.86% (9 / 21 * 100)

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.

Example: Responsive 16:9 Video Embed

<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.

Example: Custom 2:1 Aspect Ratio

<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:

Aspect Ratio Padding-top Value
3:2 66.67% (2 / 3 * 100)
5:4 80% (4 / 5 * 100)
7:5 71.43% (5 / 7 * 100)

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.

Example: Custom 3:2 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.

Example: Responsive 16:9 Video Embed

<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.

16:9 Video Embed

Example: 16:9 Video Embed

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/your-video-id" allowfullscreen></iframe>
</div>
  1. The .ratio class is applied to the container <div>, which creates a responsive container for the video.
  2. The .ratio-16x9 class is added to set the aspect ratio to 16:9, which is a common widescreen aspect ratio used for HD videos.
  3. The YouTube video is embedded using an <iframe> element placed inside the container.
  4. The src attribute of the <iframe> points to the YouTube video URL, with your-video-id replaced by the actual ID of the video you want to embed.
  5. The allowfullscreen attribute is added to allow the video to be viewed in fullscreen mode.

When this code is used on a web page, the YouTube video will be embedded within the responsive container, and it will keep its 16:9 aspect ratio on different screen sizes. The video will scale to fit within the container without any distortion.

4:3 Slideshow Embed

Example: 4:3 Slideshow Embed

<div class="ratio ratio-4x3">
  <iframe src="https://www.slideshare.net/slideshow/embed_code/key/your-slideshow-id" allowfullscreen></iframe>
</div>
  1. The .ratio class is applied to the container <div>, creating a responsive container for the slideshow.
  2. The .ratio-4x3 class is used to set the aspect ratio to 4:3, which is a common aspect ratio for older video formats and slideshows.
  3. The slideshow is embedded using an <iframe> element placed inside the container.
  4. The src attribute of the <iframe> points to the SlideShare embed URL, with your-slideshow-id replaced by the actual ID or key of the slideshow you want to embed.
  5. The allowfullscreen attribute is added to allow the slideshow to be viewed in fullscreen mode.

With this code, the slideshow will be embedded within the responsive container, and it will keep its 4:3 aspect ratio across different screen sizes. The slideshow will scale to fit within the container while keeping its proportions.

These examples show how you can easily create responsive video and slideshow embeds using the Bootstrap Ratio class. By applying the .ratio class to a container and specifying the wanted aspect ratio class (e.g., .ratio-16x9 or .ratio-4x3), you can make sure your embedded content adapts to different screen sizes and provides a good viewing experience for your users.