\
**Category:** Support\
**Tags:** web\
**Created:** [March 20, 2023, 10:50pm UTC](https://community.bitmovin.com/t/html5-graphics-overlay-to-the-bitmovin-player/1823 "2023-03-20T22:50:44Z")\
**Posts on this page:** 8\
**Page:** 1
**Author:**  [@Adrian](https://community.bitmovin.com/u/Adrian)\
**Post date:** [March 20, 2023, 10:50pm UTC](https://community.bitmovin.com/t/html5-graphics-overlay-to-the-bitmovin-player/1823/1 "2023-03-20T22:50:45Z")
In this experiment we’ll take the standard bitmovin web player, and overlay a lower-third provided by Singular Live. It could equally come from other Html5-overlay-graphics solutions, to display a scoreboard, click-to-shop, or other interactions.
In this case the Singular Live overlay resides on : [bitmovin test - Singular.live Control App Output](https://app.overlays.uno/output/5REI7sAhd4BjjPFXj9eKaH) and is a simple animated alpha channel overlay containing different ways to make contact
---
**Author:**  [@Adrian](https://community.bitmovin.com/u/Adrian)\
**Post date:** [March 20, 2023, 11:11pm UTC](https://community.bitmovin.com/t/html5-graphics-overlay-to-the-bitmovin-player/1823/2 "2023-03-20T23:11:19Z")
**METHOD 1:** simply wrap the `player` div and the `url-overlay` iframe in the `player-wrapper`.
```auto
```
Set each child element as `position: absolute` so that each element can be rendered respectively against the parent element
```auto
#player,
.url-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
And finally adjust the z-index (to ensure the overlay is located on top of the player) and disable the pointer-events if required
```auto
.url-overlay {
z-index: 10;
pointer-events: none;
}
```
Note:
- this approach is intended for web/mobile web only.
- On mobile native, we can do the same approach by having a player-ui fork to implement the same solution with mobile webview as `Custom HTML5 UI`.
- other SDKs will need similar consideration
---
**Author:**  [@Adrian](https://community.bitmovin.com/u/Adrian)\
**Post date:** [March 29, 2023, 9:09pm UTC](https://community.bitmovin.com/t/html5-graphics-overlay-to-the-bitmovin-player/1823/3 "2023-03-29T21:09:03Z")
**METHOD 2:** bring in the Singular Overlay SDK library for more granular control
```auto
```
Set child element position:
```auto
#player,
#SingularOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
Adjust the z-index:
```auto
#SingularOverlay {
z-index: 2; }
.bmpui-ui-controlbar {
z-index: 3;}
```
Configure the overlay with javascript:
```auto
// Configure Singular Overlay SDK
let options = {
class: "iFrameClass",
interactive: true,
syncGraphics: true,
showPreloader: false,
aspect: "",
};
let overlay = SingularOverlay("#SingularOverlay", options, (params) => {
console.log("Overlay Created");
});
overlay.setContent({
appOutputToken: " ****replace with Singular's output token****"
},(params) => {
console.log("Content Loaded - params:", params);
});
overlay.addListener("message", (params) => {
console.log("message: ", params.type);
if (params.type === "backgroundClick") {
console.log("Overlay SDK: message from composition - params.type:", params.type);
if (player.isPlaying()) {
player.pause();
} else {
player.play();
}
}
});
```
---
**Author:**  [@thomas1](https://community.bitmovin.com/u/thomas1)\
**Post date:** [April 11, 2023, 2:29am UTC](https://community.bitmovin.com/t/html5-graphics-overlay-to-the-bitmovin-player/1823/4 "2023-04-11T02:29:58Z")
That’s a great “best practice” example for integrating overlays into the Bitmovin player.
Thanks for sharing it!
---
**Author:**  [@Adrian](https://community.bitmovin.com/u/Adrian)\
**Post date:** [April 11, 2023, 2:33am UTC](https://community.bitmovin.com/t/html5-graphics-overlay-to-the-bitmovin-player/1823/5 "2023-04-11T02:33:31Z")
and @thomas1 , if people want more information on your product, where should they look?
---
**Author:**  [@thomas1](https://community.bitmovin.com/u/thomas1)\
**Post date:** [April 16, 2023, 2:24pm UTC](https://community.bitmovin.com/t/html5-graphics-overlay-to-the-bitmovin-player/1823/6 "2023-04-16T14:24:22Z")
@adrian,
The [Singular Developer Portal](https://developer.singular.live/) is a good start for an overview of available APIs and SDKs. For integrating Singular overlays with video players, the Overlay SDK’s “[Getting Started](https://developer.singular.live/software-development-kits/overlay-sdk/getting-started)” section.
---
**Author:**  [@maxr](https://community.bitmovin.com/u/maxr)\
**Post date:** [June 12, 2024, 10:27am UTC](https://community.bitmovin.com/t/html5-graphics-overlay-to-the-bitmovin-player/1823/7 "2024-06-12T10:27:02Z")
Is there a way that the overlay stays active on fullscreen?
Now it disapears as soon fullscreen is activated.
---
**Author:**  [@thomas.wagner](https://community.bitmovin.com/u/thomas.wagner)\
**Post date:** [August 27, 2025, 8:58am UTC](https://community.bitmovin.com/t/html5-graphics-overlay-to-the-bitmovin-player/1823/8 "2025-08-27T08:58:38Z")
I have the same question. 🙂 Are there any updates?