Embed
Responsive wrapper for third-party embeds and raw HTML content.
---
import Embed from "@core-elements/embed/Embed.astro";
---
<Embed
aspectRatio="landscape" html="<iframe width="560" height="315" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12955.990679836792!2d170.70348176537408!3d-45.77400364665351!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa8294db97f77a0d7%3A0x37080f5515a9b64a!2sAramoana%20Beach!5e0!3m2!1sen!2sus!4v1740597622903!5m2!1sen!2sus" title="Aramoana Beach, Dunedin, New Zealand" frameborder="0" allowfullscreen></iframe>
"
/>---
blocks:
_component: building-blocks/core-elements/embed
html: |
<iframe width="560" height="315" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12955.990679836792!2d170.70348176537408!3d-45.77400364665351!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa8294db97f77a0d7%3A0x37080f5515a9b64a!2sAramoana%20Beach!5e0!3m2!1sen!2sus!4v1740597622903!5m2!1sen!2sus" title="Aramoana Beach, Dunedin, New Zealand" frameborder="0" allowfullscreen></iframe>
aspectRatio: landscape
---Overview
A responsive component for embedding iframes, maps, forms, videos, and any raw HTML content. Maintains consistent aspect ratios with presets for square, landscape, portrait, and widescreen layouts. Can also be used for raw HTML content including scripts and styles.
Properties
html string
The raw HTML content to render.
aspectRatio enum | default: landscape
The aspect ratio of the embed.
Accepted values:
-
square -
landscape -
portrait -
widescreen
Examples
Aspect Ratios
---
import Embed from "@core-elements/embed/Embed.astro";
---
<Embed
aspectRatio="square" html="<iframe width="560" height="560" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1372.6620524183181!2d170.33341713890303!3d-45.94684064277149!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa82c02d1a756cd97%3A0x44fe11e513ff4adb!2sBrighton%20Beach!5e1!3m2!1sen!2sus!4v1752859116638!5m2!1sen!2sus" title="Brighton Beach, Dunedin, New Zealand" frameborder="0" allowfullscreen></iframe>
"
/>---
blocks:
- _component: building-blocks/core-elements/embed
html: |
<iframe width="560" height="560" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1372.6620524183181!2d170.33341713890303!3d-45.94684064277149!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa82c02d1a756cd97%3A0x44fe11e513ff4adb!2sBrighton%20Beach!5e1!3m2!1sen!2sus!4v1752859116638!5m2!1sen!2sus" title="Brighton Beach, Dunedin, New Zealand" frameborder="0" allowfullscreen></iframe>
aspectRatio: square
------
import Embed from "@core-elements/embed/Embed.astro";
---
<Embed
aspectRatio="landscape" html="<iframe width="560" height="315" src="https://codepen.io/chriscoyier/embed/JypLvQ?default-tab=html%2Cresult" title="Form example" frameborder="0" allowfullscreen></iframe>
"
/>---
blocks:
- _component: building-blocks/core-elements/embed
html: |
<iframe width="560" height="315" src="https://codepen.io/chriscoyier/embed/JypLvQ?default-tab=html%2Cresult" title="Form example" frameborder="0" allowfullscreen></iframe>
aspectRatio: landscape
------
import Embed from "@core-elements/embed/Embed.astro";
---
<Embed
aspectRatio="portrait" html="<iframe width="100%" height="352" src="https://open.spotify.com/embed/playlist/679wCT6dVMDBxrYa5NcrXL?utm_source=generator" title="Coding Playlist" frameborder="0" allowfullscreen allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
"
/>---
blocks:
- _component: building-blocks/core-elements/embed
html: |
<iframe width="100%" height="352" src="https://open.spotify.com/embed/playlist/679wCT6dVMDBxrYa5NcrXL?utm_source=generator" title="Coding Playlist" frameborder="0" allowfullscreen allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
aspectRatio: portrait
------
import Embed from "@core-elements/embed/Embed.astro";
---
<Embed
aspectRatio="widescreen" html="<iframe width="560" height="315" src="https://www.google.com/maps/embed?pb=!3m2!1sen!2sus!4v1752859271364!5m2!1sen!2sus!6m8!1m7!1sUqPpk1s2lX_p8oUTrYW-oA!2m2!1d-45.9085756428095!2d170.5122221467356!3f247.1793758288432!4f5.098473307474947!5f0.7820865974627469" title="St Kilda beach, Dunedin, New Zealand" frameborder="0" allowfullscreen></iframe>
"
/>---
blocks:
- _component: building-blocks/core-elements/embed
html: |
<iframe width="560" height="315" src="https://www.google.com/maps/embed?pb=!3m2!1sen!2sus!4v1752859271364!5m2!1sen!2sus!6m8!1m7!1sUqPpk1s2lX_p8oUTrYW-oA!2m2!1d-45.9085756428095!2d170.5122221467356!3f247.1793758288432!4f5.098473307474947!5f0.7820865974627469" title="St Kilda beach, Dunedin, New Zealand" frameborder="0" allowfullscreen></iframe>
aspectRatio: widescreen
---