JavaScript Integration

The glomex integration is designed to be integrated as simply as possible, with minimal amounts of configuration necessary. At the same time, the glomex integration is highly flexible and has numerous customization options available in order to best fit with the existing layout of your website.

⚠️

This approach demonstrates how to create the integration element with JavaScript, but it is not the preferred method. We recommend using our standard embed code for most implementations.

Dynamic Creation with JavaScript

The following example shows how to create and append the glomex integration element using JavaScript:

integration.js


// Get the container element where the player will be placed
const container = document.getElementById('player-container-on-site');
 
// Create the glomex-integration element
const integration = document.createElement('glomex-integration');
integration.setAttribute('integration-id', 'REPLACE_WITH_INTEGRATION_ID');
integration.setAttribute('playlist-id', 'REPLACE_WITH_PLAYLIST_OR_VIDEO_ID');
 
// Create and append the script element
const script = document.createElement('script');
script.src = 'https://player.glomex.com/integration/1/integration.js';
script.type = 'module';
document.body.appendChild(script);
 
// Append the integration element to the container
container.appendChild(integration);
 
integration.addEventListener('playlistitembegin', function(event) {
  console.log('playlistitembegin triggered', event);
});

API Reference

For a complete list of available events, methods, and properties that you can use with the JavaScript integration, please refer to our API Reference.

💡

The API Reference provides detailed documentation on how to interact with the player programmatically, including event handling, player control methods, and configuration options.