YouTube Integration with CQ5

Managing multimedia content to any large scale website is much complicated if the content is dynamic and needs to be changed at regular intervals. Integration of YouTube with CQ5 is one of the use case which can help authors to manage the channel specific videos for particular page related with particular channel.

Below is the snapshot how this solution will work:



1) Create the configuration page for specific channel under the cloud service page of Youtube .


2) Create a dialog which will accept Channel ID, API Key & Target Path (Store location in DAM) & link this to the YouTube cloud service. This will validate the Google Key/ Channel Id. On success it will configure the cloud service with that channel.

3) Our dialog is configured with some hidden widgets which cause the creation of polling node just below the jcr:content of cloud service page. This binds our cloud service with one channel correspond to polling node which will invoke the generic importer.



Listener will set values of polling node when we click OK.


4) Now the polling node will poll the youtube service
https://www.googleapis.com/youtube/v3/search?key=”+ key+ “&part=snippet,id&order=date&maxResults=50&type=video&channelId=”+ channelId + “&pageToken=” + pageToken

via importers (A custom servlet YoutubeChannelImporter.java)

5) Our importer is responsible for storing videos in DAM at target path which we have specified in step 2

6) After execution of importer, we can check the nodes under target path which are assets that refer to YouTube videos for specific channel.


7) Now we need to customize the content finder to create a new tab which will show the YouTube videos stored under DAM.

How to create new contentfiner tab in CQ5.
8) Create a servlet AssetViewHandler which render the videos from DAM to content finder tab on the request basis for particular page. We can use OOTB servlet available in package com.day.cq.wcm.core.impl.servlets.contentfinder with some changes as we are fetching assets on page basis.

9) Now click on the page properties and select the cloud service for specific channel & save.


10) Open the en.html page, you can find the new tab in content finder with YouTube icon. And here all the videos are populated from DAM. Add the component YouTube to parsys which use the iframe, it uses the YouTube video’s id.


11) Just drag and drop the video on the Youtube component.


GitHub link: https://github.com/IntelligrapeAEM/IgWebCMS
Source: https://www.tothenew.com/blog/youtube-integration-with-cq5/