Skip to main content

Media Embed Example

· 3 min read
Anand Raja
Anand Raja
Senior Software Engineer

The MediaEmbed component embeds videos and posts from YouTube, Instagram, Facebook, TikTok, and Dailymotion directly inside your MDX articles. Each embed comes with a "View on …" link and a Picture-in-Picture (PiP) button so readers can keep watching while they scroll.

For each platform you pass a type and an id — the short platform id, not the full URL. See the reference at documentation/MEDIA_EMBEDS.md for how to extract each id.

Quick Start​

import MediaEmbed from '@site/src/components/MediaEmbed';

<MediaEmbed type="youtube" id="K6o9JTcPgOA" title="Full Tutorial" />

YouTube​

Regular Video (16:9)​

YouTube video

With a Start Time (seconds)​

<MediaEmbed type="youtube" id="K6o9JTcPgOA" startTime={85} title="Starts at 1:25" />

Starts at 1:25

YouTube Short (9:16 portrait)​

YouTube Short

Instagram​

Instagram uses the shortcode — the code between /reel/ or /p/ and the trailing slash.

Reel​

Instagram Reel

Post​

Instagram Post

Facebook​

Facebook renders via the official iframe social plugins — no App ID or SDK required.

Photo / Post (uses the numeric fbid)​

Facebook Photo Post

Reel / Video (uses the numeric reel id)​

Facebook Reel

TikTok​

TikTok needs the numeric video id (the last path segment). The username is optional — add it only so the "View on TikTok" button links to the nice @user/video/id URL.

<MediaEmbed type="tiktok" id="7567139089972006160" username="looplandia.kids" title="TikTok Clip" />

TikTok Clip

Dailymotion​

Dailymotion Video

Alignment​

Use the align prop (left | center | right, default center):

<MediaEmbed type="youtube" id="K6o9JTcPgOA" align="left" />

Grouping Several Embeds — MediaEmbeds​

For a "Video Resources" section at the end of an article, pass an array to the MediaEmbeds wrapper. It lays the embeds out in a responsive grid.

import { MediaEmbeds } from '@site/src/components/MediaEmbed';

<MediaEmbeds
  embeds={[
    { type: 'youtube', id: 'K6o9JTcPgOA', title: 'Full Tutorial' },
    { type: 'instagram', id: 'DagFUHJPUAc', title: 'Quick Tip' },
    { type: 'dailymotion', id: 'xani7te', title: 'Deep Dive' },
  ]}
/>

Video Resources

Full Tutorial

Prop Reference​

PropTypeApplies toDescription
typestringallOne of the supported platform types (see below)
idstringallThe platform-specific id (not the full URL)
titlestringallOptional caption shown above the embed
startTimenumberYouTubeStart playback at N seconds
usernamestringTikTokHandle without @, used for the "View on" link
align'left' | 'center' | 'right'allHorizontal alignment (default center)

Supported type values​

youtube, youtube-short, instagram, instagram-post, facebook-post, facebook-reel, tiktok, dailymotion

tip

Not sure how to get the id for a given URL? See the step-by-step extraction guide in documentation/MEDIA_EMBEDS.md.