CODEWITHSUNDEEP
amp-html
Momos Morbias
Momos Morbias

Reputation: 545

Cannot rendering dynamic amp-youtube

I am trying to use amp-state with amp-youtube tags. I can't render the amp-youtube dynamically from server, here is the example:

<amp-state id="youtube" [src]="'/get-youtube-id?query=hello">
    <script type="application/json">{"id":"VWGBOGcrj4s"}</script>
</amp-state>
<amp-youtube [data-videoid]="youtube.id" layout="fixed-height" height="309"></amp-youtube>

By default, i put {"id":""} in amp-state, in any case, the [data-videoid] not rendering the video, it works only if i put the video id directly.

Upvotes: 0

Views: 249

Answers (1)

Bachcha Singh
Bachcha Singh

Reputation: 3934

amp-state default state value are not bind or set for initial render page load. For set the state you need to perform action using button on tap.

You can achieve your goal by using amp-list, amp-mustache and amp-youtube

Embed YouTube videos via the dynamic video id with amp list

 <amp-list layout="fixed-height"
  height="100"
  src="https://jsonblob.com/api/jsonBlob/fd104d06-bcbf-11e9-b7d1-730cecdc4eb1"
  binding="no">         
  <template type="amp-mustache">
    <div>
        <amp-youtube width="480"
                   height="270"
                   layout="responsive"
                   data-videoid="{{videoid}}">
       </amp-youtube>
  </div>
  </template>
</amp-list>

Note : src="https://jsonblob.com/api/jsonBlob/fd104d06-bcbf-11e9-b7d1-730cecdc4eb1" should be return videoid like 

{
  "items": [
    {
      "videoid": "lBTCB7yLs8Y"
    }
  ]
}

In you case : src="'/get-youtube-id?query=hello" should be 

{
  "items": [
    {
      "videoid": "VWGBOGcrj4s"
    }
  ]
}

Example : Click Here

Upvotes: 1

Related Questions