Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 2

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/

kayest_0-1675979828284.png

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

kayest_1-1675979925329.png

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?

 

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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.

View solution in original post

8 Replies

Avatar

Community Advisor

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

Avatar

Correct answer by
Employee Advisor

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.

Avatar

Level 2

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.

Avatar

Community Advisor

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

 

 

Avatar

Level 2

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.

Avatar

Community Advisor

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.



Arun Patidar

Avatar

Level 2

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. 

Avatar

Community Advisor

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)



Arun Patidar