Web Player Migration Guide

Key Migration Changes

Note on Custom CSS and DOM Styling Behavior

Note on Javascript (JS) Player

The new Zype Player powered by Bitmovin is an HTML-based player and, when embedded using the JavaScript embed method, is directly integrated into your page’s DOM. As a result, it inherits CSS styles from the surrounding container and the broader page. This includes, but not limited too, font families, font sizes, colors, alignment.  As a result, this could impact player overlay elements or button styles. 

Any global styles or layout rules defined on your site can also unintentionally affect the appearance of the player.

For example:

• If your site defines a base font size of 1.25rem, overlay text elements within the player may appear larger than intended.
• Global button styles may override the appearance of built-in control elements like play/pause or mute/unmute.
• Layout elements such as margins or paddings on parent containers may affect the aspect ratio or responsiveness of the player.

Zype makes best effort to utilize unique names and naming conventions to avoid conflict with your site's CSS but we can not guarantee that there will not be some overlap with existing stylings or page elements.

Note on iFrame Player

If you’re embedding the Zype Player via iFrame, the player remains subject to the same inheritance rules—but only if your CSS specifically targets the iframe or its contents via scoped selectors. 

In general, styles outside the iframe won't affect the player unless you’ve implemented cross-frame communication or injected styles into the iframe context directly.

To ensure the best visual experience, we strongly recommend:

• Auditing your CSS for any global rules that might cascade into .bitmovinplayer or .bmpui-ui-* classes.
• Using scoped CSS or BEM-style naming conventions to avoid unintended overrides.
• Avoiding overly broad selectors such as div *, button, or [class*="overlay"] without containment.
• Testing your player on various breakpoints to confirm responsive behavior remains intact.

If you're experiencing unexpected layout, font size, or styling issues after migration, it's likely due to inherited styles. 

Our team can assist in identifying and isolating these conflicts—please reach out to your Zype representative or support at support@zype.com

Ad API: From THEOplayer to Bitmovin

If you're using THEOplayer’s Ad API for custom ad handling (e.g. programmatic ads, scheduling, callbacks), you will need to update your implementation to use Bitmovin’s Ad API.

THEOplayer Reference:

THEOplayer Ads API (v8)

Key interfaces you may be using:

• player.ads.schedule()
• player.ads.addEventListener()
• player.ads.play()
• player.ads.pause()

Bitmovin Reference:

Bitmovin Web Player Ads Guide

Key replacements and implementation notes:

Example Bitmovin Setup:

const player = new bitmovin.player.Player(document.getElementById('player'), config);

player.load({
  source: {
    hls: 'https://player.zype.com/YOUR_VIDEO_ID.m3u8',
    poster: 'https://image.zype.com/YOUR_THUMBNAIL_PATH.jpg',
  },
  advertising: {
    adSchedule: [
      {
        tag: 'https://adserver.com/vast.xml',
        offset: 'pre',
      }
    ]
  }
});

For more advanced ad interactions, refer to Bitmovin’s full advertising documentation.

Player Event Framework

If your current implementation listens to custom events (e.g., onPlay, onPause, onAdStart) using Zype’s Player Event Framework, the structure of those events will remain largely the same, but the underlying player object is now Bitmovin, not THEOplayer.

Please confirm your integration doesn't reference theoplayer-specific objects or methods directly.

How to Preview and Test the New Zype Player

Please visit the Zype New Player Testing Page

FAQ

Q: When will the migration happen?
A: Web player migrations will begin rolling out automatically starting the week of June 16th.

Q: Will the new player impact analytics or ad performance?
A: The new player integrates with Zype Analytics 3 and supports VAST/VMAP ad delivery out of the box.

Q: Will my site's CSS affect the appearance of the new player?
A: Yes, if you’re using the JavaScript (JS) embed method, the new Zype Player is injected directly into your page’s DOM. 

This means the player can inherit global styles from your site, including font sizes, button styling, and container layout rules. We recommend reviewing your CSS for any broad or unscoped selectors that might unintentionally modify the player’s overlays or controls. For example, styles targeting all button elements or applying font-size globally may affect the player UI.

Q: I’m using the iframe embed. Can CSS on my page still affect the player?
A: Generally no—styles defined on your parent page won’t impact an iframe-based player unless you’ve explicitly injected styles or used targeted selectors that reach into the iframe context. 

However, if your site applies CSS to the iframe element itself (e.g., width, height, border, padding), this can affect the player's container and its display behavior. Ensure your iframe container styles are tested across breakpoints to maintain responsiveness.