Embedv2

Embed allows a third-party widget to be added to a page. Media can be added from a supported URL, a pre-configured embeddable or with safe freeform HTML.

Examples

URL

URLs to embeddable objects can be pasted in the edit dialog. Embed will check that the URL matches a supported processor and provide feedback to the author. Additional URL processors can be registered by a developer.

https://www.pinterest.com/pin/146859637829777606/
  1. url: https://www.pinterest.com/pin/146859637829777606/
  2. type: url
  3. sling:resourceType: core-components-examples/components/embed
    
        

    
https://www.pinterest.com/pin/146859637829777606/

oEmbed URL

URLs to embeddable objects that use oEmbed to retrieve the embedding information. This example uses the bundled Twitter configuration. Other configurations can be easily added by a developer.

  1. url: https://twitter.com/GabrielWalt/status/1159514156074196992
  2. type: url
  3. sling:resourceType: core-components-examples/components/embed
    
        

    

Embeddable

Trusted pre-configured embeddable snippets that can be selected by an author. These snippets are parameterized and can include unsafe tags such as script. Developers are able to create custom embeddable snippets for selection in the edit dialog.

  1. layout: responsive
  2. embeddableResourceType: core/wcm/components/embed/v1/embed/embeddable/youtube
  3. youtubeAspectRatio: 56.25
  4. type: embeddable
  5. youtubeVideoId: f7hbWvHKns0
  6. accessibilityLabel: Greenland land of ice
  7. sling:resourceType: core-components-examples/components/embed
    
        

    

HTML

Allows an author to input free-form html and is restricted to safe tags only. For example, the script tag is not supported.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
  1. html: <blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</blockquote>
  2. type: html
  3. sling:resourceType: core-components-examples/components/embed
    
        

    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.