Asset Grabber – oEmbed a complete asset embed solution

If you are an AEM/CQ developer and had worked on multiple projects, then you might be very well familiar with how exasperating is to create components for embedding assets in for web page. Here’s how actually it goes from development perspective.

Things starts with video component. Now create a component for YouTube, let’s assume you created. Next day client knock’s your door and say’s, “We are now planning to embed Vimeo also, please add this into your requirement and start working“. Somehow you managed to create a Vimeo component. After 2 days, client again shoots a missile, “We had an internal discussion and now we are planning to feature Ted videos as well, please get started“. At this point what development team and with how much anger they get into you will be aware, But before leaving for the day you run this command: “project XYZ: Completed Ted Video module“. It means you have completed this as well.

When it comes to assets, it’s very strenuous to take care of all scenarios. Let me introduce you oEmbed, we call it as “Assets Grabber”. Yes, you heard right, it’s having secret magnetic attraction power to pull things from other sites and show in yours. That’s so called secret magnetic attraction is it’s ability to handle and support huge amount of sites starting from Vimeo, YouTube for videos to Flickr for images to Infogram for charts to Slideshare for slide to Meetup for meetings.

Let’s get started with our Asset Grabber oEmbed, here what you need to do:-

1. Download the oEmbed project from oEmbed Github Repository

2. Build it using maven command mvn –P install­Pack­age install ( By default, it uses AEM running on port 4502 with credentials as admin/admin.

3. Open a page in your AEM instance. Go to design mode, you will find this component in “General Component Group”

4. Once added component can be seen in sidekick.



5. Drag and drop this component on page and open the first tab in dialog, paste the following URL https://www.youtube.com/watch?v=nlUQfXwvQLc and Click “Ok”.



6. See the output, video on the URL will embed on your webpage



The one above shown is done with YouTube, Here are following other’s you can try :-

SlideShare: http://www.slideshare.net/JituTomar/aem-best-practices?qid=652f3bef-29bd-48ee-9cff-9654fd3e1100

23HQ: http://www.23hq.com/ddantgwyn/photo/21892547

TED: http://www.ted.com/talks/raymond_wang_how_germs_travel_on_planes_and_how_we_can_stop_them

So, that’s it. So summarising in three steps:

1. Download the component and put in your AEM
2. Check the sites its supports form here
3. Copy URL and embed it.

Let me know if you need any help in integrating