Overview

The glomex Video Player is integrated using the glomex-integration web component. This modern approach provides extensive customization options, allowing you to:

Display playlists outside the player
Implement different player layouts
Customize the player experience without modifying your CMS

💡

Our player utilizes modern browser technologies to ensure a swift and lightweight implementation. As a result, it is not compatible with outdated browsers such as Internet Explorer and Legacy Edge.

Standard Implementation

Here’s the standard embed code for the glomex Video Player:

publisher.html

<script
  src="https://player.glomex.com/integration/1/integration.js"
  type="module"
></script>
<link
  rel="stylesheet"
  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>

💡

Need to generate embed code with your specific Integration ID and Playlist ID? Use our Embed Code Generator tool to quickly create ready-to-use embed codes in various formats.

Understanding the Code Components

Each part of the embed code serves a specific purpose:

integration.js: Loads the JavaScript code for the web component
- The type="module" attribute is required - omitting it will cause errors
variant.css: Provides essential styling that:
- Reserves space for the player before it fully loads
- Prevents Cumulative Layout Shift (CLS)
- Eliminates the need for custom container wrappers
glomex-integration: The web component that:
- Adapts to the width of its container
- Renders the video player according to your configuration

Alternative Implementation for CMP Compatibility

⚠️

This is a workaround for specific cases where your Content Management Platform (CMP) or other tools interfere with script tags that have the type="module" attribute. Always use the standard implementation when possible.

If you’re experiencing issues with the standard implementation due to a CMP that modifies script tags or doesn’t support type="module", you can use this alternative approach:

publisher-cmp-compatible.html


<script>
  const script = document.createElement('script');
  script.setAttribute('type', 'module');
  script.src = 'https://player.glomex.com/integration/1/integration.js';
  (document.head || document.body).appendChild(script);
</script>
<link
  rel="stylesheet"
  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>

This method dynamically creates a script element with the required type="module" attribute, bypassing potential CMP interference with inline script attributes.

Integration IDs and Playlist IDs

Integration ID

An Integration ID represents a specific player configuration including:

Color settings
Autoplay behavior
Overall player appearance

You can create and manage player configurations at exchange.glomex.com → Manage → Player.

Example: integration-id="id1234567890"

Playlist ID

A Playlist ID can reference one of three content types:

Type	Format	Example
Single Video	`v-[string]`	`playlist-id="v-123456789"`
Playlist	`pl-[string]`	`playlist-id="pl-123456789"`
Curated Playlist	`cl-[string]`	`playlist-id="cl-123456789"`
Contextual Playlist	`auto`	`playlist-id="auto"`

Recommended Integration Strategy

We recommend creating separate integrations for different contexts. This approach allows you to tailor the player experience to specific locations across your websites.

For example, if you manage multiple domains like domain-a.com and domain-b.com, consider creating distinct integrations for:

Articles on domain-a.com
Articles on domain-b.com
Homepage on domain-a.com
Homepage on domain-b.com
Sidebar on domain-a.com
Sidebar on domain-b.com

This strategy enables you to optimize the video experience for each specific context, improving user engagement and performance.