How to populate component dialog field with video asset's YouTube URL using picker | Community
Skip to main content
K
kayest
Level 2
February 9, 2023
Solved

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

  • February 9, 2023
  • 4 replies
  • 2122 views

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?

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by DEBAL_DAS

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.

4 replies

Umesh_Thakur
Community Advisor
Umesh_ThakurCommunity Advisor
Community Advisor
February 10, 2023

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
    DEBAL_DASAccepted solution
    New Member
    February 10, 2023

    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.

    Debal Das, Senior AEM Consultant
      K
      kayestAuthor
      Level 2
      February 10, 2023

      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
      Community Advisor and Adobe Champion
      Ritesh_MittalCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      February 10, 2023

      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

       

       

        K
        kayestAuthor
        Level 2
        February 10, 2023

        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
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        February 10, 2023

        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
          K
          kayestAuthor
          Level 2
          February 10, 2023

          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
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          February 11, 2023

          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
          Terms & ConditionsAccessibility statement

          Loading footer...