Embedding AMP

Embedding AMP in a HTML page is a three step process:

  1. Include the AMP JS script
  2. Provide embed-time configuration (set the media to play and/or configure any features)
  3. Instantiate the AMP object, associating it with a div on the page. The player will take on the size of the div in a responsive manner
<html>
  <head>
    <script src="amp.js"></script>
  </head>
  <body>
    <div id="amp"></div>
    <script>
      var config = {
        autoplay: true,
        media: {
          src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
          type: "video/mp4"
        }
      };

      akamai.amp.AMP.create("amp", config);
    </script>
  </body>
</html>

There is also the option to embed the player inline in HTML:

<html>
  <head></head>
  <body>
    <script class="amp-inline" src="amp.js" data-config='{media: {src: "VfE.mp4"}}'></script>
  </body>
</html>

Multiple players can be embedded on the same page by adding class="amp-inline" to any DOM element, along with data- attributes to configure each player instance:

<html>
  <head></head>
  <body>
    <script class="amp-inline" src="amp.js" data-defaults='{media: {src: "VfE.mp4"}}'></script>
    <div class="amp-inline" data-src="VfE2.mp4"></div>
    <div
      class="amp-embed"
      id="player2"
      data-autoplay="muted"
      data-src="VfE3.mp4"
      data-poster="#{paths.resources}images/bunny.jpg"
      data-time="10"
      data-width="318"
      data-height="178">
    </div>
  </body>
</html>