Technical Details
The latest technical documentation about the Embed Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.
Configure Dialog
The configure dialog allows the content author to define the external resource to be embedded on the page.
Properties Tab
First choose which type of resource should be embedded:
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 oEmbed standard including Facebook Post, Instagram, SoundCloud, Twitter, and YouTube
Developers can add additional URL processors by following the developer documentation of the Embed Component.
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
- Width - The width of the embedded video
- Height - The height of the embedded video
- Enable Mute - This parameter specifies whether the video will play muted by default. Enabling this increases the chance that Autoplay works in modern browsers.
- Enable Autoplay - This parameter specifies whether the initial video will automatically start to play when the player loads. This is only effective on the publish instance or when using the View as Published option on the authoring instance.
- Enable Loop - In the case of a single video, this parameter specifies whether the player should repeatedly play the initial video. In the case of a playlist, the player plays the entire playlist and then starts again at the first video.
- Enable Inline Playback (iOS) - This parameter controls whether videos play inline (on) or fullscreen (off) in an HTML5 player on iOS.
- Unrestricted Related Videos - If this option is disabled, related videos will come from the same channel as the video that was just played, otherwise they will come from any channel.
Other embeddables would offer similar fields and can be defined by a developer by following the developer documentation of the Embed Component.