Video Reloads When Page Width Changes

Is there a way for a video to continue playing/displaying as the page width is being changed?

If you don’t know what I’m talking about, add the video element to a blank page, add the URL of a video, go to preview, hit play, then adjust your page width.

Thanks,

Daniel

What’s happening is the page gets redrawn when the window is resized. This often means videos get restarted.

The only way around this that I know is to set the page to fixed width so that it’s not redrawn when it’s resized.

1 Like

I know this was a while ago, but I’d like to understand it more if possible.

This doesn’t happen on any other websites I see. Is this only a Bubble thing?

Yes, that’s my understanding. It has to do with the way Bubble’s responsive engine works. Whenever a page is resized, Bubble recalculates the width of all of the items and then redraws them. When it does this, the video system refreshes which means it starts the connection over.

We work around this by setting the page to be a fixed width page and then using Javascript to make the video full screen.

1 Like

Understood. I can’t use fixed width pages for any of the work I’m trying to do so oh well. Will we see this on the Roadmap soon @emmanuel?

To be clear, we’re using a fixed width page technologically but we use JS to make the page appear to the user as if it’s fully responsive. So, the UX of this is pretty good.

The problem is it requires a fair amount of JS coding to make it work. And, making changes becomes fairly cumbersome because they require JS changes. So, not near as maintainable as a typical Bubble page.

Ah, I see. Is there a place you could point me to in order to figure this out? And an example would also be great.

Cheers

While I can’t share code examples from our app, at it’s core you just need to set the iFrame to the full width and height of the user’s viewport. We do this in the “appearance” tab of the iFrame. We also set it to check for changes every 50 milliseconds so that it’ll update if the user changes their viewport size.

We had done this before Bubble exposed an ID attribute. That’s definitely the way to go.

I’m not particular comfortable writing JS yet, so I had hired someone to do this for me. It’s not super complex, but not quite a good project for a JS beginner either.

Best of luck!

1 Like

Cheers. I’ll try out this method. Appreciate your help!

I had the same issue… Looking at the source it seems everything is refreshed in responsive… It’s just a bubble thing as far as I can tell… What you gain in spades with bubble has some challenges in other areas. (I’m not complaining)… In my case it was a video when a user rotated their device would reset the video. This actually struck at the root of what my application was actually delivering which meant using bubble for the delivery mechanism was just not goning work.

Instead I’m using a native HTML and then using bubbles API for all the data… In my case it’s actually worked much better than I hoped.

Just for anybody else’s interest who finds themselves here… Since using bubble and being so awed by its possibilities and ease-of-use I had fallen into the trap of believing everything should be in bubble which I’m sure it will be as the platform progresses.

I would encourage people to keep an open mind. Bubbles API is excellent and the possibilities of using other technologies and leveraging the bubble API expands possibilities exponentially in my view

1 Like