How to use IFrame player API in amp?

Question

I am creating a sample HTML project using IFrame player API from https://developers.google.com/youtube/iframe_api_reference#playVideo, and I would like to convert it to AMP version.

I have followed the official docs from https://amp.dev/documentation/components/amp-script/, by using <amp-script> tag, but it doesn't work. The base.js file includes the function onYouTubeIframeAPIReady() function, and over script:

<amp-script layout=container src="/amp/base.js">
<amp-script src="https://www.youtube.com/iframe_api">
<div id="player"></div>
</amp-script>     
</amp-script>

The video doesn't appear in the rendering view.

Hello @fstanis, I already have used amp-youtube. By setting an "id" the tag, and calling the onYouTubeIframeAPIReady() function with the same code from the official doc in it, it doesn't work, — zayann

fstanis fstanis · Accepted Answer · 2019-11-12T14:34:23

You don't need to use the YouTube API if you're using the amp-youtube component. The component runtime will set everything up for you and you can instead use the play action to play the video:

<amp-youtube id="myVideo" data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270"></amp-youtube>

<button on="tap:myVideo.play">Play</button>

How to use IFrame player API in amp?

1 Answers