To start, you need to create an initial template like the following and save it in a file with an .HTML extension

As can be seen, the content of the body is normal to any HTML, however there are not very well known tags, which are mandatory for the structure of an AMP document.

Required AMP codes

An AMP document must have:

Inserting the Player

To make use of the Mediastream player it is necessary to load the amp-video-iframe.js library in our <head> section, we will do it as follows:

Finally we will add our <amp-video-iframe> component in the body and our page would be as follows:

https://www.w3schools.com/code/tryit.asp?filename=GOOVTN094DR0

Remember to write the Media ID and Poster URL that you can get by API in each Media.

Ready, that way it is possible to use our player on an AMP page. Always remember to help yourself with validation tools, here we leave you one. You should always see this screen if everything is correct.

You can see the validation in this link https://search.google.com/test/amp?id=3bbaDqftj88B72PklH5vMQ

Did this answer your question?