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.

Overview

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

Usage

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

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

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} />