Skip Navigation

Embed Core

The Embed Component allows embedding external content in an AEM content page. Media can be added from a supported URL, a pre-configured embeddable or with safe freeform HTML.

Example

View on public site:

Service Annual Survey Questionnaires

When to Use

Use a Teaser Core when you have a featured page with an image that you want to display from another page. The Teaser Core component can be placed on any page in the site, including landing pages. It can be placed in the content, right rail, and left rail containers of the page.

Be sure to verify that the title matches the title from the linked page and the description content accurately summarizes the page or matches the description text from the linked page.

Ensure that the asset has all the correct and necessary information attached to it, such as file size, and accurately matches the related image on the linked page.

Usage

The Embed Component allows the content author to define selected external content to be embedded within an AEM content page. In addition, there is an option to define free-form HTML to be embedded as well.

The component’s properties can be defined in the configure dialog.
Defaults for the component when adding it to a page can be defined in the design dialog.

Configure Dialog

The configure dialog allows the content author to define the external resource to be embedded on the page.

Tab: Properties

First choose which type of resource should be embedded:

URL
Embeddable
HTML

For each type of embeddable, you can define an ID. This option allows to control the unique identifier of the component in the HTML and in the Data Layer.

If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
If an ID is specified, it is the responsibility of the author to make sure that it is unique.
Changing the ID can have an impact on CSS, JS and Data Layer tracking.

URL

The simplest embed is the URL. Simply paste the URL of the resource you wish to embed in the URL field. The component will attempt to access the resource and if it can be rendered by one of the processors, it will display a confirmation message below the URL field. If not, the field will be marked in error.

The Embed Component ships with processors for the following types of resources:

Resources that comply with the Embed standard including Facebook Post, Instagram, SoundCloud, Twitter, and YouTube
Pinterest
Developers can add additional URL processors by following the developer documentation of the Embed Component.

Authors are required to specify the height of the embedded URL at each breakpoint - Desktop, Tablet, and Mobile.

Shape your future. START HERE. RT this video and make sure everyone you know is counted in the #2020Census. We’re one year out! Usage of this video is not permitted beyond April 1, 2021. pic.twitter.com/WEdiajdxlO
— U.S. Census Bureau (@uscensusbureau) April 1, 2019

Embeddable

Embeddables allow for more customization of the embedded resource, which can be parameterized and include additional information. An author is able to select from pre-configured trusted embeddables and the component ships with a YouTube embeddable out-of-the-box.

The Embeddable field defines the type of processor you want to use. In the case of the YouTube embeddable you can then define:

Video ID - The unique video ID from YouTube of the resource you want to embed.
Accessibility Label - Value of an aria-label attribute for the iframe.
Layout - Choose between a fixed or responsive layout of the embedded video.
Width - The width of the embedded video.
Height - The height of the embedded video.
Percentage Aspect Ratio - Percentage aspect ratio of the YouTube video player (height / width * 100%).
ID - HTML ID attribute to apply to the component.