Customizing the Zype Web Player Appearance

Zype's web player is powered by Bitmovin Player, a commercial-grade player used widely across the streaming industry for reliable, high-quality playback. While Zype manages the default player configuration and appearance to ensure consistency and compatibility across updates, some customers may wish to apply their own styling or user interface (UI) enhancements.

This article explains where Zype already exposes branding controls, how the player is rendered on your page, and which CSS hooks you can target from your own site to change appearance — including colors, the most common request.

Custom Styling and UI Modifications

The Bitmovin Player's styling is primarily managed through CSS. Although Zype does not officially support or maintain customer-specific styling customizations, you are welcome to modify the player's appearance within your own site's implementation.

Custom styling and UI modifications are performed at your own discretion and may not remain compatible with future player updates or version changes. Because Zype must maintain backward compatibility across all customers, we're unable to provide technical support for custom CSS, layout changes, or other modifications outside of the standard Zype configuration.

How the Zype Player Loads on Your Site

Zype renders the player by injecting a small bootstrap script into your page. That script loads the Bitmovin Player core, the Bitmovin Player UI, the Bitmovin advertising module, and the Bitmovin analytics SDK from resources.zype.com, then constructs the player inside a container element on your page.

The DOM Container

The player mounts inside a div element whose id depends on the embed method:

• JS embed: the container is <div id="zype_{video_id}"> (or a custom id if you use the container_selector option).
• iframe embed: Zype renders its own page inside the iframe, with the container <div id="zype_player">.

The CSS Layers in Play

Three layers of CSS combine to produce the final look of the player:

• Bitmovin's stock UI stylesheet, served from resources.zype.com/bitmovin/ui/<ui-version>/css/bitmovinplayer-ui.min.css. This defines all the default colors, button shapes, hover states, and overlay layouts.
• Zype's inline overrides, injected as a <style class="zype-bitmovin-styles"> block. These set the watermark/logo behavior, hide ad-time chrome, and tweak the social/sharing overlays.
• Your site's CSS, if you are using the JS embed (more on this below).

The Embed Method Changes Everything

Before changing anything, confirm which embed method you're using. The two methods behave very differently with respect to CSS.

JS Embed (script tag)

• The player runs inside your page's DOM.
• Your site's CSS can affect the player. Global rules (e.g. an unscoped button { ... }) may leak into player controls.
• You can add custom CSS that targets the player's classes — this is the embed method to use for color and styling work.

iframe Embed

• The player runs in a separate Zype-hosted page inside an iframe.
• Generally your page's CSS does not affect the player's controls — same-origin protection prevents your stylesheet from reaching inside the iframe.
• You can still style the iframe element itself (width, height, border, padding, aspect ratio). Test these across breakpoints to maintain responsiveness.

Practical takeaway: if you need real appearance changes (colors, control sizing, hidden controls), you almost certainly want the JS embed. If you must keep the iframe, you can still control the player's outer dimensions and border.

Built-In Customizations Zype Already Supports

Before you write any CSS, check whether what you need is already exposed in the Zype admin. These are first-class, supported settings — they will continue to work across player upgrades.

Player Branding Tab

Under Settings → Player Branding on each Zype site you can configure:

• Logo (watermark): an image overlaid on the player. Recommended: maximum width ~48px, opacity below 100%, simple silhouette.
• Logo URL: a click-through destination for the logo.
• Auto-hide: hide the logo whenever the player controls are hidden.
• Player Error Message: text shown when a critical playback error occurs.
• Player Error Image: a background image that appears behind the error message.

These are wired directly into the player at render time and require no CSS work. They are the safest path: they do not break on player upgrades.

Player Settings Tab

Under Settings → Player Settings you can also toggle behavior that indirectly affects appearance: age gate, social sharing buttons, embed-code sharing button, Chromecast button, and Google Analytics integration. Turn these off if you want a cleaner UI rather than restyling them.

Changing Player Colors With Custom CSS

If the built-in branding controls aren't enough, you can override the Bitmovin Player UI by adding CSS to your own site. This section walks through the key class names, what they style, and a worked example for a brand-color rollout.

The Two CSS Namespaces You'll See

The Bitmovin Player UI uses two prefixes for its DOM classes:

• .bitmovinplayer-* — structural elements (the player container, the poster image, the video element wrapper).
• .bmpui-* — everything in the UI layer (control bar, buttons, sliders, overlays, settings menu, watermark).

Most color and styling overrides target classes in the .bmpui-* namespace.

Most Commonly Customized Elements

These are the player components customers most often want to recolor or restyle. Class names below come from the Bitmovin Player UI shipped with Zype; they are stable across point releases but are not part of a public, contractual API.

If you don't see your target element in the list, open your site in a desktop browser, right-click the player control you care about, choose Inspect, and read the class names directly from the DOM. The control you click is almost always wrapped by a .bmpui-ui-* class.

Worked Example: Rolling Out Your Brand Color

Suppose your brand color is #E60023 (a vivid red) and you want the seek bar fill, the buffered indicator, the volume slider fill, and the big center play button to all match. The four steps below take you end to end.

Step 1. Confirm You're Using the JS Embed

Look at how the player is added to your page. If you see a script tag pointing at player.zype.com alongside a div with id zype_..., you're on the JS embed and can proceed. If you only see an iframe, custom CSS will not reach into the player — switch the embed method or stop here.

Step 2. Add a Scoping Wrapper Around the Player

Wrapping the embed lets you scope every override so that you don't accidentally restyle other elements on your site that happen to share class names.

Step 3. Define a Brand-Color Stylesheet

Add the following CSS to your site stylesheet, or inject it on the page that hosts the player. Every selector is prefixed with .brand-player so the rules don't escape into other components.

Step 4. Verify Across Player Versions

Open the page in your browser's DevTools, hover/play/pause/seek, and inspect each control to confirm the override won. If a rule isn't applying, the class name has likely moved between Bitmovin Player UI versions — re-inspect and update the selector.

Why !important? The Bitmovin Player UI stylesheet is loaded by the player at runtime and is highly specific. !important is the simplest way to make sure your override wins without inflating selector specificity.

Additional Examples

Hide a Control Instead of Restyling It

If a control doesn't fit your brand at all, the cleanest answer is often to hide it. The cast button, embed-share button, settings gear, and quality selector are all common candidates.

Restyle the Subtitle Overlay

Subtitle styling is a frequent ask. The overlay class lets you change font, color, background, and shadow without touching anything else.

Responsive 16:9 Wrapper

Both embed methods respect the size of the wrapping element. If the player looks letterboxed, the wrapper, not the player, is the right thing to size:

Frequently Asked Questions

Will my site's CSS affect the appearance of the new player?

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.

I'm using the iframe embed. Can CSS on my page still affect the player?

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.

Common Pitfalls

Site CSS Leaking Into the Player (JS embed)

Because the JS embed renders inside your DOM, any unscoped global styles on your site can land on player controls and overlays. Watch for:

• button { ... } or * { ... } rules that change padding, font-size, or borders.
• img { max-width: 100% } rules that resize the watermark.
• Global font-size rules that shrink or enlarge time labels and tooltips.
• Reset stylesheets that strip default :hover behavior.

Fix by scoping your global rules (e.g. main button { ... }) or by adding explicit overrides inside your .brand-player wrapper.

Class Names Changing Between Player Versions

Zype periodically upgrades the Bitmovin Player UI version used to render your site's player. When that happens, an internal class name may be renamed or removed, and a CSS rule that targeted it will silently stop working. Build a habit of re-testing your branded player after each Zype platform release notice and after any change in Settings → Player Settings → Bitmovin Player Version.

Specificity Conflicts

If a rule isn't applying, open DevTools and look at the Computed pane to confirm which rule won. The Bitmovin UI stylesheet often uses multi-class selectors (e.g. .bmpui-ui-controlbar .bmpui-ui-button). Match or exceed that specificity, or use !important.

Best Practices

• Prefer the built-in Player Branding tab for logo and error-state changes — these survive every player upgrade.
• Use the JS embed when you need real CSS control over the player UI; use the iframe embed when you only need to size the player container.
• Always wrap the embed in a scoping element (e.g. .brand-player) so your overrides cannot leak.
• Define a brand color once as a CSS custom property (--brand) and reference it from every override.
• Use !important sparingly but predictably for player-UI overrides — you're competing with a stylesheet you don't own.
• Keep your overrides in a single, well-named CSS file so the next person can find them.
• After every player version bump, re-verify your overrides: autoplay on, ad break, paused, hovered, fullscreen.

Important Notes on Support Limitations

Our support boundaries for player customization are in place to:

• Ensure stability and backward compatibility across player updates.
• Prevent conflicts caused by unsupported or untested modifications.
• Maintain a reliable playback experience for all customers using Zype's managed player.

If you choose to customize the player, please note that future Zype or Bitmovin updates may overwrite or conflict with your custom code. If you open a ticket about a styling issue, expect to be asked to:

• Reproduce the issue with all custom CSS removed.
• Confirm the issue exists with the default Zype-managed player on the same video.
• Share the exact embed snippet you're using and the player UI version.

Recommended Bitmovin Resources

To safely explore player customization options, we recommend reviewing Bitmovin's official documentation and examples:

• Customize Player UI Experience

Treat both as inspiration; not every option shown there is exposed by the Zype-managed wrapper.

Summary

Use Zype's built-in Player Branding for logo and error-state work. When you need to change colors or restyle controls, choose the JS embed, scope your rules under a wrapper, target the .bmpui-ui-* classes, and re-test after each player version change. Keep customizations small, well scoped, and documented so that future player updates don't surprise you.

While Zype's player customization is not directly supported, you have full freedom to experiment with CSS or UI enhancements as needed. Any such modifications should be tested carefully and maintained independently to ensure continued playback compatibility.