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

# 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) Load CodePen content](https://codepen.io/bbodine1/pen/DqdMRy)

CodePen uses cookies to show this content. This requires your permission.

Allow CodePen  [watch on CodePen ](https://codepen.io/bbodine1/pen/DqdMRy)