Skip to Content
The new glomex player is released! 🎉View upgrade guide
PublisherPlayerEmbed CodeAdvancedAMP

AMP Integration

⚠️

Google AMP is deprecated

In June 2021, Google implemented a major update to their page experience ranking algorithm. With the introduction of Core Web Vitals and the page experience algorithm, Accelerated Mobile Pages (AMP) no longer receive preferential treatment in Google’s search results, Top Stories carousel, or Google News. The AMP badge icon has also been removed from search results.

You can now confidently move away from Google AMP, enabling you to create a more diverse and engaging web without the limitations previously imposed by the adtech giant.

The glomex Video Player can be integrated into AMP pages  using different AMP components. This guide covers the implementation options and best practices if you still need to support AMP.

Integration Methods

Using amp-video-iframe

The amp-video-iframe component provides enhanced video capabilities in AMP pages. For detailed information, refer to the official amp-video-iframe documentation .

Implementation Example

<html>
  <head>
    <!-- Required AMP scripts -->
    <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
    <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
  </head>
  <body>
    <!--
      Replace REPLACE_WITH_INTEGRATION_ID and REPLACE_WITH_PLAYLIST_ID with your values
    -->
    <amp-video-iframe
      data-block-on-consent="_till_responded"
      src="https://player.glomex.com/integration/1/integration.html"
      data-param-integration-id="REPLACE_WITH_INTEGRATION_ID"
      data-param-playlist-id="REPLACE_WITH_PLAYLIST_ID"
      width="16"
      height="9"
      layout="responsive"
      poster="https://player.glomex.com/glomex-placeholder.png"
      dock>
    </amp-video-iframe>
  </body>
</html>
đź’ˇ

The dock attribute enables the sticky-player feature within Google AMP, allowing the video to remain visible while scrolling.

Using amp-iframe

The amp-iframe component provides a more general-purpose iframe solution. For detailed information, refer to the official amp-iframe documentation .

Implementation Example

<html>
  <head>
    <!-- Required AMP script -->
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  </head>
  <body>
    <!--
      Replace REPLACE_WITH_INTEGRATION_ID and REPLACE_WITH_PLAYLIST_ID with your values
    -->
    <amp-iframe
      data-block-on-consent="_till_responded"
      src="https://player.glomex.com/integration/1/integration.html?integrationId=REPLACE_WITH_INTEGRATION_ID&playlistId=REPLACE_WITH_PLAYLIST_ID"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
      allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; payment"
      allowfullscreen
      referrerpolicy="unsafe-url"
      frameborder="0"
      width="16"
      height="9"
      layout="responsive">
      <amp-img layout="fill" src="https://player.glomex.com/glomex-placeholder.png" placeholder></amp-img>
    </amp-iframe>
  </body>
</html>

To monetize effectively, you must integrate a TCF 2.0 compliant CMP on your AMP pages. For detailed information, refer to the official amp-consent documentation .

<html>
  <head>
    <!-- Required AMP scripts -->
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
    <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
    <!--
      We use `data-block-on-consent="_till_responded"` on elements that should be blocked
      until consent is given to receive the accepted/rejected consent string.
 
      Alternatively, you can use a global <meta> tag:
      https://amp.dev/documentation/components/amp-consent/#basic-blocking-behaviors
    -->
  </head>
  <body>
    <!-- Configure your TCF 2.0 CMP -->
    <amp-consent id="consent" layout="nodisplay" type="FILL_IN_YOUR_CMP_TYPE">
      <div id="promptConsentUI">
        <button role="button" on="tap:consent.prompt(consent=consent)"></button>
      </div>
    </amp-consent>
 
    <!-- amp-video-iframe integration -->
    <amp-video-iframe
      data-block-on-consent="_till_responded"
      src="https://player.glomex.com/integration/1/integration.html"
      data-param-integration-id="REPLACE_WITH_INTEGRATION_ID"
      data-param-playlist-id="REPLACE_WITH_PLAYLIST_ID"
      width="16"
      height="9"
      layout="responsive"
      poster="https://player.glomex.com/glomex-placeholder.png"
      dock>
    </amp-video-iframe>
 
    <!-- amp-iframe integration -->
    <amp-iframe
      data-block-on-consent="_till_responded"
      src="https://player.glomex.com/integration/1/integration.html?integrationId=REPLACE_WITH_INTEGRATION_ID&playlistId=REPLACE_WITH_PLAYLIST_ID"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
      allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; payment"
      allowfullscreen
      referrerpolicy="unsafe-url"
      frameborder="0"
      width="16"
      height="9"
      layout="responsive">
      <amp-img layout="fill" src="https://player.glomex.com/glomex-placeholder.png" placeholder></amp-img>
    </amp-iframe>
  </body>
</html>
Last updated on
Ad-ServerContextual