Embed

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.

Github URL

Adobe URL

Source URL
Title 
URL
Content 
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.
Result 
        
    



    
    https://www.pinterest.com/pin/146859637829777606/
Properties: 
jcr:primaryType: nt:unstructured
jcr:lastModifiedBy: admin
url: https://www.pinterest.com/pin/146859637829777606/
type: url
jcr:lastModified:
sling:resourceType: core/wcm/components/embed/v1/embed
Markup: 
        
    <div class="embed">
<div id="embed-7f788b93db" class="cmp-embed">
    
    <a data-pin-do="embedPin" href="https://www.pinterest.com/pin/146859637829777606/">https://www.pinterest.com/pin/146859637829777606/</a>
    <script>
        var pinterestScript = "https://assets.pinterest.com/js/pinit.js";
        var scripts = document.getElementsByTagName("script");
        var exists = false;
        for (var i = 0; i < scripts.length; i++) {
            if (scripts[i].src.indexOf(pinterestScript) >= 0) {
                exists = true;
                break;
            }
        }
        if (!exists) {
            var script = document.createElement("script");
            script.src = pinterestScript;
            script.setAttribute("data-pin-build", "doBuild");
            document.getElementsByTagName("body")[0].appendChild(script);
        }
        if (typeof window.doBuild === "function") {
            window.doBuild();
        }
    </script>
    
    
</div>
    
</div>
JSON: 
{"type":"URL","url":"https:\/\/www.pinterest.com\/pin\/146859637829777606\/","result":{"processor":"pinterest","options":{"pinId":"146859637829777606"}},":type":"core\/wcm\/components\/embed\/v1\/embed"}
PostCSS: CSS: Title 
oEmbed URL
Content 
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.
Result
Properties: 
jcr:primaryType: nt:unstructured
jcr:lastModifiedBy: admin
url: https://twitter.com/GabrielWalt/status/1159514156074196992
type: url
jcr:lastModified:
sling:resourceType: core/wcm/components/embed/v1/embed
Markup: 
<div class="embed">
  <div id="embed-190977130e" class="cmp-embed">
    <blockquote class="twitter-tweet">
      <p dir="ltr" lang="en">New <a href="https://twitter.com/hashtag/AEM?src=hash&amp;ref_src=twsrc%5Etfw">#AEM</a> Project Archetype 20 got released!<br>It features a frontend build process based on <a href="https://twitter.com/webpack?ref_src=twsrc%5Etfw">@Webpack</a>, with <a href="https://twitter.com/SassCSS?ref_src=twsrc%5Etfw">@SassCSS</a> and <a href="https://twitter.com/typescript?ref_src=twsrc%5Etfw">@TypeScript</a>. You can customize it to use any tool: no more ClientLib limitations.<a href="https://t.co/ivjNtiZkXi">https://t.co/ivjNtiZkXi</a><a href="https://twitter.com/hashtag/CoreCmp?src=hash&amp;ref_src=twsrc%5Etfw">#CoreCmp</a> <a href="https://twitter.com/hashtag/Adobe?src=hash&amp;ref_src=twsrc%5Etfw">#Adobe</a> <a href="https://twitter.com/hashtag/ExperienceManager?src=hash&amp;ref_src=twsrc%5Etfw">#ExperienceManager</a> <a href="https://twitter.com/hashtag/AEM6?src=hash&amp;ref_src=twsrc%5Etfw">#AEM6</a> <a href="https://twitter.com/hashtag/CSS?src=hash&amp;ref_src=twsrc%5Etfw">#CSS</a> <a href="https://twitter.com/hashtag/JS?src=hash&amp;ref_src=twsrc%5Etfw">#JS</a> <a href="https://t.co/Cy3FdRCNvg">pic.twitter.com/Cy3FdRCNvg</a></p>— Gabriel Walt (@GabrielWalt) <a href="https://twitter.com/GabrielWalt/status/1159514156074196992?ref_src=twsrc%5Etfw">August 8, 2019</a>
    </blockquote>
    <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
</div>
JSON: 
{"type":"URL","url":"https:\/\/twitter.com\/GabrielWalt\/status\/1159514156074196992","result":{"processor":"oembed","options":{"provider":"Twitter","response":{"type":"rich","version":"1.0","title":null,"authorName":"Gabriel Walt","authorUrl":"https:\/\/twitter.com\/GabrielWalt","providerName":"Twitter","providerUrl":"https:\/\/twitter.com","cacheAge":3153600000,"thumbnailUrl":null,"thumbnailWidth":null,"thumbnailHeight":null,"width":"550","height":null,"html":"<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">New <a href=\"https:\/\/twitter.com\/hashtag\/AEM?src=hash&amp;ref_src=twsrc%5Etfw\">#AEM<\/a> Project Archetype 20 got released!<br>It features a frontend build process based on <a href=\"https:\/\/twitter.com\/webpack?ref_src=twsrc%5Etfw\">@Webpack<\/a>, with <a href=\"https:\/\/twitter.com\/SassCSS?ref_src=twsrc%5Etfw\">@SassCSS<\/a> and <a href=\"https:\/\/twitter.com\/typescript?ref_src=twsrc%5Etfw\">@TypeScript<\/a>. You can customize it to use any tool: no more ClientLib limitations.<a href=\"https:\/\/t.co\/ivjNtiZkXi\">https:\/\/t.co\/ivjNtiZkXi<\/a><a href=\"https:\/\/twitter.com\/hashtag\/CoreCmp?src=hash&amp;ref_src=twsrc%5Etfw\">#CoreCmp<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/Adobe?src=hash&amp;ref_src=twsrc%5Etfw\">#Adobe<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/ExperienceManager?src=hash&amp;ref_src=twsrc%5Etfw\">#ExperienceManager<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/AEM6?src=hash&amp;ref_src=twsrc%5Etfw\">#AEM6<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/CSS?src=hash&amp;ref_src=twsrc%5Etfw\">#CSS<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/JS?src=hash&amp;ref_src=twsrc%5Etfw\">#JS<\/a> <a href=\"https:\/\/t.co\/Cy3FdRCNvg\">pic.twitter.com\/Cy3FdRCNvg<\/a><\/p>&mdash; Gabriel Walt (@GabrielWalt) <a href=\"https:\/\/twitter.com\/GabrielWalt\/status\/1159514156074196992?ref_src=twsrc%5Etfw\">August 8, 2019<\/a><\/blockquote>\n<script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n","url":"https:\/\/twitter.com\/GabrielWalt\/status\/1159514156074196992"},"unsafeContext":true}},":type":"core\/wcm\/components\/embed\/v1\/embed"}
PostCSS: CSS: Title 
Embeddable
Content 
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.
Result
Properties: 
jcr:primaryType: nt:unstructured
embeddableResourceType: core/wcm/components/embed/v1/embed/embeddable/youtube
type: embeddable
youtubeVideoId: f7hbWvHKns0
sling:resourceType: core/wcm/components/embed/v1/embed
Markup: 
<div class="embed">
  <div id="embed-9b77a6082e" class="cmp-embed">
    <iframe src="https://www.youtube.com/embed/f7hbWvHKns0?origin=https%3A%2F%2Faemcomponents.dev&amp;hl=en" allowfullscreen="" allow="autoplay; fullscreen" aria-label="YouTube Video" width="100%" height="390" frameborder="0"></iframe>
  </div>
</div>
JSON: 
{"type":"EMBEDDABLE","embeddableResourceType":"core\/wcm\/components\/embed\/v1\/embed\/embeddable\/youtube",":type":"core\/wcm\/components\/embed\/v1\/embed"}
PostCSS: CSS: Title 
HTML
Content 
Allows an author to input free-form html and is restricted to safe tags only. For example, the script tag is not supported.
Result 

  

    
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.
Properties: 
jcr:primaryType: nt:unstructured
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>
type: html
sling:resourceType: core/wcm/components/embed/v1/embed
Markup: 
<div class="embed">
  <div id="embed-808c598c55" class="cmp-embed">
    <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>
  </div>
</div>
JSON: 
{"type":"HTML","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>",":type":"core\/wcm\/components\/embed\/v1\/embed"}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *