How to populate component dialog field with video asset's YouTube URL using picker

[kayest]

We have a video component that allows the author to select a video to embed in the component. How can I allow the user to map to the video, but then insert the value for the video URL property into a field in our HTML file? 

For example, the path to a video would look something like this:

/content/retail/en/videos/chicken-fettuccini-recipe/

We need to extract the YouTube video ID, which is 'aRWzFTqQZpk' in the example below, and insert it on our page.

Final markup:

<div class="yt-player" data-src="aRWzFTqQZpk" data-div="some-id" data-height="360" data-id="some-id" data-width="640">

Any suggests on how to approach this?

[Umesh_Thakur]

I don't think so there is any out of the box feature for the same, but you can achieve this with the help of js.

implementation will be like create on extra clintlibs, have a JS file into it. when you select any video, same time you will be making call to the selected path to DAM, read all the required metainfo from there and set the attribute to the dialog fied.

for example you see core image component.

I am assuming, you have the video id ON DAM PATH only.

hope this helps.

Umesh Thakur

[DEBAL_DAS · Accepted solution]

I feel you can give a try with the approach mentioned below -

Step 1: You can have one metadata associated with asset URL (you can name it something like Public URL for Video) for each video asset.

In this way you can have a mapping between video asset and it's URL.

Step 2: You need to write a logic to read and populate video url at Youtube Video field based on the selection of video asset at Selection video field. You can achieve this via dialog editor level JavaScript logic.

[kayest]

Thanks for the reply. In Step 2, you mention writing the logic via dialog editor level JavaScript logic. Can you explain in more detail what is meant by this? Is the JS written in the dialog content.xml? If not, does a clientlib JS file need to be created? Thank you.

[Ritesh_Mittal]

Hi @kayest ,

I need few clarifications before I provide my inputs-

• As you mentioned, the videos are being stored like /content/retail/en/videos/chicken-fettuccini-recipe/, I do not see any extension (say mp4) to the 'chicken-fettuccini-recipe' video. Please confirm if this is really a video or Content Fragment.
• The second question is, you are making YouTube URL by appending YouTube video ID, and I am assuming your component will eventually play YouTube video only, so do you really need videos in DAM at '/content/retail/en/videos/'.
• What other meta-da you are storing in DAM video, is it just Video ID?

Thanks

Ritesh Mittal

[kayest]

Hi Ritesh,

The videos are actually hosted on YouTube. We use AEM to catalog the library of videos. Video assets have a "YouTube URL"  field that currently contains data like this:  

www.youtube.com/watch?v=aRWzFTqQZpk

Other meta data being stored includes: Title, YouTube URL, and Image.

[arunpatidar]

Please check the youtube implementation for core component

https://www.aemcomponents.dev/content/core-components-examples/library/core-content/embed.html

You can just ask authors to use youtube id instead of complete url in the dialog.

[kayest]

We talked about asking authors to use the YouTube id instead, but...

1. There are hundreds of existing videos that would need to be updated.
2. I still need to figure out how to bring that "YouTube video id" value into my component. 

[arunpatidar]

you can parse the url and check if queryString (?v=aRWzFTqQZpk) is present then you can extract the id and return to HTL.

This way it will work for both(full url and id)