Foundation CSS Responsive Embed

The Responsive Embed component in Foundation CSS allows you to easily embed responsive media such as videos, maps, and iframes into your web pages. This ensures that the embedded content adapts to different screen sizes and maintains its aspect ratio. Here's how you can use the Responsive Embed component:

1. Basic Usage

To embed media with responsive behavior, use the <div> element with the responsive-embed class and specify the aspect ratio using the padding-top property.

Example markup:

<div class="responsive-embed">
    <iframe src="https://www.youtube.com/embed/-B8UlAPItzo"></iframe>
</div>

This will embed a YouTube video with responsive behavior.

2. Custom Aspect Ratio

You can customize the aspect ratio of the embedded content by adjusting the padding-top property of the <div> element. The aspect ratio is specified as a percentage of the width to height ratio.

Example markup:

<div class="responsive-embed"  style="padding: 10px; background: #e1e1e1;">
    <iframe src="https://www.youtube.com/embed/-B8UlAPItzo"></iframe>
</div>

This will create a custom aspect ratio of 16:9 for the embedded content.

3. Supported Media Types

The Responsive Embed component supports embedding various types of media, including videos, maps, and iframes. You can embed content from popular platforms such as YouTube, Vimeo, Google Maps, and more.

Example markup for embedding a Google Map:

<div class="responsive-embed" style="padding: 10px; background: #e1e1e1;">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.871116441146!2d-73.99345578459784!3d40.741850379328046!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2593035a31ac3%3A0xdf8c2c038a6d6f5!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1649999999999!5m2!1sen!2sus"></iframe>
</div>

This will embed a Google Map with a custom aspect ratio of 4:3.

Conclusion

The Responsive Embed component in Foundation CSS provides a simple and flexible way to embed responsive media content into your web pages. Whether you're embedding videos, maps, or iframes, the Responsive Embed component ensures that the content adapts to different screen sizes and maintains its aspect ratio for a consistent viewing experience across devices.

Archive