Open In App

Foundation CSS Responsive Embed

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. 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. 

In this article, we will learn about the responsive-embed component class in Foundation CSS.

What is the function of the responsive-embed component in Foundation CSS? 

In the modern days, we access websites from various devices of different screen sizes. So it is essential that the website looks perfect in different screen sizes. The responsive embed component helps in that. This component helps to embed components like video, calendar, and many others inside a responsive container so that it maintains the proper size ( or aspect ratio) irrespective of the screen size.  

Foundation CSS Responsive Embed class:

  • responsive-embed: This class is added to the container to make the content be responsive embed i.e it changes according to the aspect ratio. 

Syntax:

<div class="responsive-embed"> ... </div>

Aspect Ratio Classes of Responsive Embed Component:

  • widescreen: This class changes the aspect ratio of the container to 16:9 from the default 4:3 value.
  • vertical: This class changes the aspect ratio of the container to 9:16.
  • square: This class changes the aspect ratio of the container to 1:1.
  • panorama: This class changes the aspect ratio of the container to 256:81. 

Note: We can change the default values of aspect ratios by changing the $responsive-embed-ratios map in your settings file. For example, we can remove the vertical and widescreen and add different classes of our own.  

Example: We have embedded a video from the GFG YouTube channel to the website and used the responsive-embed class to resize it according to the aspect ratio.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
 "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
         crossorigin="anonymous"
    <script src=
        crossorigin="anonymous">
    </script>     
</head>
  
<body>
     
    <h2 style="color:green;">GeeksforGeeks</h2>
    <strong>Foundation CSS Responsive Embed</strong>
    <br/>
    <div class="row">
        <div class="medium-8 columns">
            <div class="responsive-embed widescreen">
                <iframe width="661" height="372" src=
                    allowfullscreen>
                </iframe>
            </div>
        </div>
    </div>
     
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

 

Reference link: https://get.foundation/sites/docs/responsive-embed.html



Last Updated : 04 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads