{"id":14874,"date":"2014-07-31T15:06:52","date_gmt":"2014-07-31T09:36:52","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=14874"},"modified":"2016-12-19T15:33:31","modified_gmt":"2016-12-19T10:03:31","slug":"youtube-integration-with-cq5","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/youtube-integration-with-cq5\/","title":{"rendered":"YouTube Integration with CQ5"},"content":{"rendered":"

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.<\/p>\n

Below is the snapshot how this solution will work:<\/p>\n

\"UseCase\"<\/a><\/p>\n

1) \u00a0\u00a0\u00a0\u00a0\u00a0Create the configuration page for specific channel under the cloud service page of \u00a0Youtube .<\/p>\n

\"createconfig\"<\/a><\/p>\n

2)\u00a0\u00a0\u00a0\u00a0\u00a0 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.<\/p>\n

\"service\"<\/a><\/p>\n

3) \u00a0 \u00a0 \u00a0Our 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.<\/p>\n

\"importer\"<\/a><\/p>\n

Listener will\u00a0set values of polling node when we click OK.<\/p>\n

\"polling\"<\/a><\/p>\n

4) \u00a0 \u00a0 \u00a0\u00a0Now the polling node will poll the youtube service<\/p>\n

[html]<\/p>\n

https:\/\/www.googleapis.com\/youtube\/v3\/search?key=\u201d+ key+ \u201c
\n&amp;part=snippet,id&amp;order=date&amp;maxResults=50&amp;type=video
\n&amp;channelId=\u201d+ channelId + \u201c&amp;pageToken=\u201d + pageToken<\/p>\n

[\/html]<\/p>\n

via importers (A custom servlet YoutubeChannelImporter.java<\/a>)<\/p>\n

5) \u00a0 \u00a0\u00a0Our importer is responsible for storing videos in DAM at target path which we have specified in step 2<\/p>\n

6) \u00a0 \u00a0 \u00a0After execution of importer, we can check the nodes under target path which are assets that refer to YouTube videos for specific channel.<\/p>\n

\"imageres\"<\/a><\/p>\n

7)\u00a0Now we need to customize the content finder to create a new tab which will show the YouTube videos stored under DAM.<\/p>\n

How to create new contentfiner tab in CQ5.<\/strong><\/p>\n

8)\u00a0 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 <\/strong>with some changes as we are fetching assets on page basis.<\/p>\n

9) Now click on the page properties and select the cloud service for specific channel & save.<\/p>\n

\"cloudservice\"<\/a><\/p>\n

10)\u00a0Open 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\u2019s id.<\/p>\n

\"component1\"<\/a><\/p>\n

11) Just drag and drop the video on the Youtube component.<\/p>\n

\"image\"<\/a><\/p>\n

GitHub link :\u00a0https:\/\/github.com\/IntelligrapeAEM\/IgWebCMS<\/a><\/p>\n

Hope this helps!!!
\nVivek Dhiman<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":128,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":9},"categories":[1],"tags":[1235,4847,1494,1495],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14874"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/128"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=14874"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14874\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=14874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=14874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=14874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}