Foundation CSS Kitchen Sink Responsive Embed

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 Kitchen Sink has the Foundation elements to work well in our websites and applications. Kitchen Sink Responsive Embed is a component that you can add to wrap iframe, object, embed, or video to make these elements scale responsively. Responsive Embed allows maintaining the correct aspect ratio regardless of screen size. To ensure that the aspect ratio of the embed remains the same irrespective of the screen size, wrap the embed element in a container with a .responsive-embed class.

Foundation CSS Kitchen Sink Responsive Embed 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: This example describes the Kitchen Sink Responsive Embed in Foundation CSS.

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 Kitchen Sink Responsive Embed</h3> 
        <div class="responsive-embed"> 
            <iframe width="420" 
                    height="315" 
                    src= 
"https://www.youtube.com/embed/bptRLm3OiV8"> 
            </iframe> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Kitchen Sink Responsive Embed

Aspect Ratios classes allow you to change the aspect ratio of the responsive embed. The default ratio is 4:3. However, the user can implement the .widescreen class to change the container’s aspect ratio to 16:9.

Example: This example describes the Kitchen Sink Responsive Embed in Foundation CSS.

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 Kitchen Sink Responsive Embed 
        </h3> 
        <div class="responsive-embed widescreen"> 
            <iframe width="420" 
                    height="315" 
                    src= 
"https://www.youtube.com/embed/bptRLm3OiV8"> 
            </iframe> 
        </div> 
    </center> 
</body> 
</html>