Techdocs

AMP Web SDK

AMP player

Embedding AMP

This tutorial shows the simplest way to embed AMP. To see a working demo please check our demo page.

To Embed AMP in a HTML page is needed to:

1. Include the AMP JS script

If you are using the zip version provide the url to your amp.js file. If you are using the hosted version of AMP, you will need to provide your API Key and the desired version. The example below uses the hosted version.

<html>
  <head>
    <script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.0.14"></script>
  </head>
  <body>
  </body>
</html>

2. Prepare a configuration object

Please refer to akamai.amp.PlayerConfig for more information on the configuration object. In the next example, we're providing a akamai.amp.Media object that should play automatically when the player has finished loading content.

<html>
  <head>
    <script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.0.14"></script>
  </head>
  <body>
    <script>
      var config = {
        autoplay: true,
        media: {
          src: "my video URL.mp4",
          type: "video/mp4"
        }
      };
    </script>
  </body>
</html>

3. Create the AMP object

Instantiate the AMP object and embed it in a div on the page by passing an id or handle as first argument. The player will take on the size of the div in a responsive manner.

<html>
  <head>
    <script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.0.14"></script>
  </head>
  <body>
    <div id="amp"></div>
    <script>
      var config = {
        autoplay: true,
        media: {
          src: "my video URL.mp4",
          type: "video/mp4"
        }
      };
      akamai.amp.AMP.create("amp", config);
    </script>
  </body>
</html>

Adding AMP as an inline HTML object

The player can be embedded by adding the class="amp-inline" to the script tag and providing a configuration object using the attribute data-config.

<html>
  <head></head>
  <body>
    <script class="amp-inline" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.0.14" data-config='{"media":{"src":"my video URL.mp4"}}'></script>
  </body>
</html>

Multiple players can also be embedded on the same page by adding class="amp-inline" to any DOM element, along with data- attributes to configure each player instance. Take note that the attribute data-config is replaced by data-defaults, in the first script element.

<html>
  <head></head>
  <body>
    <script class="amp-inline" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.0.14" data-defaults='{"media":{"src":"VfE.mp4"}}'></script>
    <div class="amp-inline" data-src="my video URL.mp4"></div>
    <div
      class="amp-inline"
      id="player2"
      data-autoplay="muted"
      data-src="my video URL.mp4"
      data-poster="my poster URL.jpg"
      data-time="10"
      data-width="318"
      data-height="178">
    </div>
  </body>
</html>