Iframe (Astro)

Iframe (Astro)

Display videos in an iframe with a specified aspect ratio.

:choco-info: Astro Only Documentation Below

The documentation below covers how to use the <Iframe /> Astro Component from choco-astro.


The <Iframe> Component gives a simple way to show videos with defined aspect ratios. In most cases, this is used for YouTube videos.

Ratio Options

In order to render the <Iframe> Component, the ratio option must be passed in. Below are the valid options:

  • 1x1
  • 4x3
  • 16x9
  • 21x9
  • 700x506
  • 1200x630


Pass in Individual Options

import Iframe from '@choco/components/Iframe.astro';

<Iframe ratio="16x9" link="https://www.youtube.com/embed/RejkurlQ2RU?si=9L8tctnAXFzoVxCp" title="Unpacking Software" />

Pass in an Object

import Iframe from '@choco/components/Iframe.astro';

export const iframe1 = {
    title: 'Unpacking Software',
    ratio: '16x9',
    link: 'https://www.youtube.com/embed/RejkurlQ2RU?si=9L8tctnAXFzoVxCp'

<Iframe content={iframe1} />