Foundation CSS Responsive Embed Aspect Ratios

Last Updated : 22 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Responsive Embed component facilitates wrapping the embedded media contents, such as videos, maps, calendars, etc, inside the responsive embed container, in order to maintain the correct aspect ratio, irrespective of screen size. To ensure that the aspect ratio of the embed remains the same irrespective of the screen size, then wrap the embed element in a container with a .responsive-embed class. The Aspect Ratios class allows you to change the aspect ratio of the responsive embed. The default ratio is 4:3. The .widescreen class helps to change the container’s aspect ratio to 16:9.

Foundation CSS Responsive Embed Aspect Ratio Class:

default: This is the embed ratio (4:3) inherited, by default. Therefore, whenever the user applies a responsive-embed class, the responsive embed gets the aspect ratio of 4:3.
widescreen: Foundation gives the user another choice of aspect ratio for the responsive embed which is the widescreen ratio or 16:9. To apply an aspect ratio of 16:9, add .widescreen class to .responsive-embed class.

Syntax:

<div class = "responsive-embed">
    <iframe width = "" height = "" src = ""></iframe>
</div>

Example: The following example demonstrates the Responsive Embed class with default ratio i.e 4:3.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Foundation CSS Responsive Embed Default 
        </h3> 
        <div class="responsive-embed "> 
            <iframe width="420" 
                    height="315" 
                    src= 
"https://www.youtube.com/embed/bptRLm3OiV8"> 
            </iframe> 
        </div> 
    </center> 
</body> 
</html>

Output:

Responsive Embed Default Aspect Ratio

Example: The following example demonstrates the Responsive Embed class with a widescreen ratio i.e 16:9.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Responsive Embed Widescreen Aspect Ratio 
        </h3> 
        <div class="responsive-embed widescreen"> 
            <iframe width="420" 
                    height="315" 
                    src= 
"https://www.youtube.com/embed/bptRLm3OiV8"> 
            </iframe> 
        </div> 
    </center> 
</body> 
  
</html>