Upgrade Guide

This guide will help you migrate from the legacy glomex player to the new glomex integration. It covers API changes, event handling differences, and updated embed code examples. The new integration is a complete rewrite in TypeScript with performance as the number one goal, resulting in faster load times and improved user experience.

💡

The legacy glomex-player has been replaced by the new glomex-integration web component, which offers improved performance, better customization options, and simplified API. For the new standard embed code, see our Embed Code Overview.

General changes

the glomex-player web component is deprecated and replaced by the glomex-integration web component
in order to connect to player events, it is not necessary anymore to wait for the ready event
connecting to events can now be done by directly using the integration element (not accessing integration.player anymore)

API Changes

Removed APIs

The following APIs from glomex-player are no longer available in the glomex-integration web component:

hideUi()
showUi()
enableModalMode()
stop()

Changed APIs

The following APIs have been updated in the transition from glomex-player to glomex-integration:

setPlaylistIndex

Use integration.setAttribute('index', index)

updatePresentationMode

Use integration.setPresentationMode('dock') for mode updates

mute / unmute

Toggle sound with integration.muted = true | false

isPlaying

Check playing status with !integration.paused

setup

Initialization is not needed; use setAttribute for setup

💡

The new API design follows standard web component patterns, making it more intuitive for developers familiar with HTML5 and the Web Components specification.

Event changes

Events now do not carry a large payload anymore, because the integration element now provides getters for consent, content, currentAd, and other properties.

Legacy Event	New Event	Description
`playlistitembegin`	`contentstart`	Fired when content starts playing
`playlistitemcomplete`	`ended`	Fired when content has finished playing
`contentbegin`	`contentimpression`	Fired when content is displayed to the user
`adbegin`	`adimpression`	Fired when an ad is displayed to the user
`updateconsentdata`	`userupdateconsent`	Fired when user updates consent settings
`contenttimeupdate`	`timeupdate`	Fired when content playback time updates
`playlistcreate`	`playlistupdate`	Fired when playlist information is updated
`updatepresentatiomode`	`playersetpresentationmode`	Fired when presentation mode changes

New Events

Event	Description
`adpaused`	Fired when an ad is paused
`adresumed`	Fired when an ad resumes playing after being paused
`advolumechange`	Fired when ad volume changes
`contentstop`	Fired when content is completely stopped (not just paused)

💡

Access event data directly from the integration element using its properties and methods. For example: integration.content, integration.currentAd, integration.consent.

For more details on events and available methods, refer to our API Reference.

Embed code changes

glomex-player.js


<script
-  src="https://player.glomex.com/integration/1/glomex-player.js"
+  src="https://player.glomex.com/integration/1/integration.js"
-  defer
+  type="module"
></script>
<link
   rel="stylesheet"
-  href="https://player.glomex.com/integration/1/glomex-player.css"
+  href="https://player.glomex.com/variant/REPLACE_WITH_INTEGRATION_ID/variant.css"
>
-<glomex-player
-  data-integration-id="REPLACE_WITH_INTEGRATION_ID"
-  data-playlist-id="REPLACE_WITH_PLAYLIST_ID"
+<glomex-integration
+  integration-id="REPLACE_WITH_INTEGRATION_ID"
+  playlist-id="REPLACE_WITH_PLAYLIST_ID"
>
-</glomex-player>
+</glomex-integration>

For more details on JavaScript implementation, see our JavaScript Integration Guide.

glomex-player.js (contextual)

The given REPLACE_WITH_INTEGRATION_ID must be mapped to contextual variant then.


<script
-  src="https://player.glomex.com/integration/1/glomex-player.js"
+  src="https://player.glomex.com/integration/1/integration.js"
-  defer
+  type="module"
></script>
+<link
+  rel="stylesheet"
+  href="https://player.glomex.com/variant/REPLACE_WITH_INTEGRATION_ID/variant.css"
+>
-<glomex-player
+<glomex-integration
-  data-integration-id="REPLACE_WITH_INTEGRATION_ID"
+  integration-id="REPLACE_WITH_INTEGRATION_ID"
-  act="initially-hidden"
+  playlist-id="auto"
>
-</glomex-player>
+</glomex-integration>

For more details on contextual integration, see our Contextual Integration Guide.

glomex-integration.js


<script
-  src="https://player.glomex.com/integration/1/glomex-integration.js"
+  src="https://player.glomex.com/integration/1/integration.js"
   type="module"
></script>
<link
   rel="stylesheet"
-  href="https://player-integration.mes.glomex.cloud/integration/REPLACE_WITH_INTEGRATION_ID/variant.css"
+  href="https://player.glomex.com/variant/REPLACE_WITH_INTEGRATION_ID/variant.css"
>
<glomex-integration
  integration-id="REPLACE_WITH_INTEGRATION_ID"
  playlist-id="REPLACE_WITH_PLAYLIST_ID"
>
</glomex-integration>

For more details on standard integration, see our Standard Embed Code Guide.

glomex-integration.js (contextual)

The given REPLACE_WITH_INTEGRATION_ID must be mapped to contextual variant then.


<script
  src="https://player.glomex.com/integration/1/glomex-integration.js"
  type="module"
>
</script>
<link
   rel="stylesheet"
-  href="https://player-integration.mes.glomex.cloud/integration/REPLACE_WITH_INTEGRATION_ID/variant.css"
+  href="https://player.glomex.com/variant/REPLACE_WITH_INTEGRATION_ID/variant.css"
>
<glomex-integration
   integration-id="REPLACE_WITH_INTEGRATION_ID"
+  playlist-id="auto"
>
</glomex-integration>

💡

For contextual integration to work properly, your player configuration in the glomex dashboard must have the integration variant set to “contextual”.

For more details on contextual integration, see our Contextual Integration Guide.

amp-video-iframe


<html>
  <head>
    <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>
     <amp-video-iframe
       data-block-on-consent="_till_responded"
-      src="https://player.glomex.com/integration/1/iframe-player.html"
+      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>

For more details on AMP implementation, see our AMP Integration Guide.

amp-iframe


<html>
  <head>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  </head>
  <body>
     <amp-iframe
       data-block-on-consent="_till_responded"
-      src="https://player.glomex.com/integration/1/iframe-player.html?integrationId=REPLACE_WITH_INTEGRATION_ID&playlistId=REPLACE_WITH_PLAYLIST_OR_VIDEO_ID"
+      src="https://player.glomex.com/integration/1/integration.html?integrationId=REPLACE_WITH_INTEGRATION_ID&playlistId=REPLACE_WITH_PLAYLIST_OR_VIDEO_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>

For more details on AMP implementation, see our AMP Integration Guide.

glomex-script-integration.js


<script
-  src="https://player.glomex.com/integration/1/glomex-script-integration.js?integrationId=REPLACE_WITH_INTEGRATION_ID"
+  src="https://player.glomex.com/integration/1/script.js?integrationId=REPLACE_WITH_INTEGRATION_ID"
></script>

For more details on script integration, see our Script Integration Guide.

iframe-player.html


-<div style="position:relative;padding-bottom:56.25%;">
+<div style="width: 100%; aspect-ratio: 16/9;">
   <iframe
-    style="position:absolute;top:0;left:0;width:100%;height:100%;"
-    allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; payment"
+    style="width:100%; height:100%;"
+    allow="encrypted-media; accelerometer; autoplay; clipboard-write; gyroscope; picture-in-picture; payment"
     allowfullscreen
     frameborder="0"
     scrolling="no"
     loading="lazy"
     referrerpolicy="unsafe-url"
-    src="https://player.glomex.com/integration/1/iframe-player.html?integrationId=[INTEGRATION_ID]&playlistId=[PLAYLIST_ID]"
+    src="https://player.glomex.com/integration/1/integration.html?integrationId=REPLACE_WITH_INTEGRATION_ID&playlistId=REPLACE_WITH_PLAYLIST_ID"
   ></iframe>
 </div>

💡

Note the removal of the fullscreen permission from the allow attribute and the switch to using aspect-ratio instead of the older padding-bottom technique for responsive behavior.

For more details on iFrame implementation, see our iFrame Integration Guide.