Bitmovin Issues: Autohide and Fullscreen Troubles in Bubble

Hey community,

I hope you’re all doing well! I’m working on a Bubble project and currently building a Bitmovin plugin for my app. While most things are working smoothly, I’ve hit a roadblock with two specific issues that have me scratching my head.

1. Autohide Issue: I’m facing a problem where the controls aren’t hiding as expected. It seems like the player controls hide inconsistently. I’ve double-checked my Bubble setup and the Bitmovin documentation, but I’m unable to pinpoint the cause.

2. Fullscreen Quirks: The second challenge I’m grappling with is related to fullscreen toggling. When I enter fullscreen, it appears that the original video keeps playing, and a new video is layered on top, ready to play from the beginning. The same happens when toggling out of fullscreen – a new video is created and set to play from the start. I’m not sure why this behavior is occurring, and it’s impacting the user experience.

To provide a clearer picture, I’ve recorded some videos demonstrating these issues. Additionally, I’ve included the relevant code snippets from my Bubble project.

Autohide issue Dropbox - Autohide - Simplify your life

Fullscreen issue Dropbox - - Simplify your life

Here is my plug in code. I’m not really a coder but was able to put something together by looking at other open source video plugins.

The Bitmovin documentation is pretty extensive but I’ll put a few links that I was referencing.

I would greatly appreciate any insights or suggestions from the community. If you’ve encountered similar challenges or have expertise in Bitmovin integration, your guidance would be invaluable.

Thanks in advance for your help!


Knowledge drop:

Your update function will execute multiple times. Is there a chance this is why you see multiple instantiations of your video?


Thanks for your prompt reply. I was indeed thinking along those lines. Unfortunately, my current knowledge doesn’t allow me to pinpoint where the error might be occurring.

I’ve recently added a poster, and the behavior is a bit off. As you can see in the video I’ve attached, the poster image isn’t filling the screen entirely (although I suspect I can tweak that with some properties). On the positive side, the auto hide feature is working as intended. However, when it comes to fullscreen, it seems to be creating a new instance, which wasn’t expected. Please take a look at the video.

Edit – Link

Any insights or suggestions you have would be greatly appreciated. I’m eager to get this sorted out.

Thanks again!

const player = new bitmovin.player.Player(container, playerConfig);
I think this is creating two instances. I commented everything else out one by one and I still see that two instances are being loaded. I don’t really understand how though.

EDIT: So, like you said, the update function is running multiple times - when a field is updated, in this case the image and video links. Ok, so maybe I should put the constructor in the initialize function? But then how do I put the playerConfig settings when I need to use them as fields in the update function?

1 Like

Just add a if statement if the var is set inside

Thanks for your reply! Could you elaborate on what you mean? I’m a novice coder.

Would I put the if statement in the initialize or update function?

in the update

So you can do something like

if(! = new …

That way you only initialize it once

Thanks so much. I knew there was a simple fix.

1 Like

I can’t figure out the code to get the image to go full screen.

I need to background size to be auto. How do I change that? I’ve been trying all sorts of things but nothing is working.

I’ll post screen shots of what i need to change and what I have.