---
title: "Embed block"
description: "Embeds third-party HTML such as a widget or iframe in a figure."
requested_language: sk
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/sk/next/payload/blocks/embed
version: unreleased (main)
docs_index: https://docs.systhema.app/sk/next/llms.txt
---
> This page isn't translated yet. Showing English.


The Embed block places third-party embed markup on a page.

![The embed block fields in the Payload editor](./images/embed.light.webp)

## Where it is offered

Offered in the `root`, `region` and `fragment` tiers, so editors can place it on a page, inside a Section, Feature or Gallery body, and inside cards, columns and accordions. It is never offered in the `slot` tier. The block is on by default; turn it off with `embed: false`.

## Fields

<!-- generated:block-fields embed -->

| Field              | Type       | Label              | Default      | Notes                                                                                                                                                                                                                                                                                                     |
| ------------------ | ---------- | ------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `_inCard`          | `checkbox` |                    |              |                                                                                                                                                                                                                                                                                                           |
| `_tier`            | `select`   |                    |              | Options: `root` (Root), `region` (Region), `fragment` (Fragment), `slot` (Slot), `stack` (Stack)                                                                                                                                                                                                          |
| `align`            | `radio`    | Alignment          | `left`       | Shown when `siblingData?.embedCode`; Required; Shown when `sized(siblingData)&&(siblingData?.widthType==="pixels"\|\|siblingData?.widthType==="percentage"&&typeof siblingData?.widthPercentage==="number"&&siblingData.widthPercentage<100)`; Options: `left` (Left), `center` (Center), `right` (Right) |
| `cardWidth`        | `radio`    | Width alignment    | `default`    | Shown when `siblingData?.embedCode`; Required; Shown when `hasValue(siblingData)&&siblingData?._inCard===true`; Options: `default` (Default), `card` (Card width)                                                                                                                                         |
| `disableAnimation` | `checkbox` | Disable Animations | `false`      | Shown when `siblingData?.embedCode`                                                                                                                                                                                                                                                                       |
| `embedCode`        | `code`     | Embed Code         |              | Required                                                                                                                                                                                                                                                                                                  |
| `widthPercentage`  | `number`   |                    | `100`        | Shown when `siblingData?.embedCode`; Required; Shown when ``visible(siblingData)&&siblingData?.[`${dimension}Type`]==="percentage"``                                                                                                                                                                      |
| `widthPixels`      | `number`   |                    | `600`        | Shown when `siblingData?.embedCode`; Required; Shown when ``visible(siblingData)&&siblingData?.[`${dimension}Type`]==="pixels"``                                                                                                                                                                          |
| `widthType`        | `radio`    | Width              | `percentage` | Shown when `siblingData?.embedCode`; Required; Shown when `visible(siblingData)`; Options: `percentage` (%), `pixels` (px)                                                                                                                                                                                |
| `width`            | `radio`    | Width alignment    | `default`    | Shown when `siblingData?.embedCode`; Required; Shown when `(hasValue?hasValue(siblingData):true)&&siblingData?._tier!=="fragment"`; Options: `default` (Default), `container` (Container), `screen` (Screen)                                                                                              |

<!-- /generated -->

As a direct child of a card it gains a **Card width** option; see [Media inside a card](https://docs.systhema.app/sk/next/payload/blocks/card.md#media-inside-a-card).

## Rendered output

Renders the embed inside a [Figure](https://docs.systhema.app/sk/next/components/figure.md).

## Converter

`embedConverter` puts `embedCode` directly on `<Figure dangerouslySetInnerHTML>`. Empty code renders nothing. Outside fragment tier it applies percentage or pixel width and alignment; in a card it honors the direct-child Card width setting. This is trusted HTML, so only allow authors you trust to edit it; the converter does not sanitize it.

## Customizing

Import `EmbedBlock` from `@systhemaui/payload/blocks` as the starting schema for a project block. Register the definition and your renderer through `customBlocks`, using `type: 'block'` and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing `embed` slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.

See [Registering blocks](https://docs.systhema.app/sk/next/payload/blocks.md#registering-blocks) for the configuration pattern and [Converters](https://docs.systhema.app/sk/next/payload/custom-blocks/converters.md) for the renderer contract. A project converter used in client-mode live preview also needs [browser registration](https://docs.systhema.app/sk/next/payload/frontend/live-preview/client-mode.md).

## Related

- [Plugin options](https://docs.systhema.app/sk/next/payload/plugin-options.md)
- [YouTube block](https://docs.systhema.app/sk/next/payload/blocks/youtube.md)