---
title: "Embed Block Demo"
description: "Base setup on top of headless services to help you get started quickly"
language: "English"
url: "https://head-start.pages.dev/en/demos/embed-block-demo/"
---

Copy page

* [Open in Claude ](https://claude.ai/new?q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Fembed-block-demo%2F+and+explain+it+to+me.)
* [Open in ChatGPT ](https://chatgpt.com/?hints=search\&q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Fembed-block-demo%2F+and+explain+it+to+me.)

# Embed Block Demo

!Note: this piece of documentation is auto-generated from [blocks/EmbedBlock/README.md](https://github.com/voorhoede/head-start/tree/main/src/blocks/EmbedBlock/README.md).

**Renders external content based on the block's OEmbed data.**

## Features

* Supports [\~300 content providers](https://oembed.com/providers.json) (like Twitter, Flickr, YouTube, etc) using the [OEmbed](https://oembed.com/) protocol.

* Renders a noscript embed version which is dynamically enhanced.

* Lazy loads embed scripts and iframes to improve performance.

* Provides a mechanism to define custom renderer per provider.

* If OEmbed data is unavailable, a link is displayed with the page title of the given URL.

## Relevant links

* Embed Block data is preloaded in the CMS using the [DatoCMS OEmbed Plugin](https://github.com/voorhoede/datocms-plugin-oembed/).

## CodePen Embed:

[![CodePen: CSS3 Checkbox Styles](https://shots.codepen.io/username/pen/DqdMRy-512.jpg?version=1434117929)](https://codepen.io/bbodine1/pen/DqdMRy)