Embed

The Embed component lets you display embedded content from platforms like YouTube, Pinterest, X (Twitter), or insert custom HTML.

Preview

Fields

  • embedChooser (default: pinterest) - A switchable field to choose the type of embedded content:

    • pinterest - Displays a Pinterest pin:

      • pinterestURL (required) - URL of the Pinterest pin.

    • twitter - Displays a Tweet:

      • twitterURL (required) - URL of the post on X (formerly Twitter).

    • youtube - Embeds a YouTube video:

      • youtubeVideoTitle (required) - Title for the video.

      • youtubeVideoID (required) - The YouTube video ID.

      • youtubeVideoWidth (optional) - Width in pixels (default: 560).

      • youtubeVideoHeight (optional) - Height in pixels (default: 315).

    • html - Embeds custom code:

      • html (required) - Raw HTML to be embedded. Provided via code field.

Behavior

  • Based on the selected embed type, the component renders the corresponding embed code:

    • Pinterest and X use platform-specific embedding via URL.

    • YouTube embed uses the video ID and optional dimensions.

    • HTML option renders the raw HTML directly.

  • Only one embed type can be used at a time.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Embed -p embed
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules