Fullscreen mode video player not working on mobile, how to fix it?

Hello all!

Guys, maybe who know, how to fix the problem with a fullscreen mode in the video player on mobile? On desktop work correctly, but on mobile, if i click in video player fullscreen mode, the page reloaded. These problems i find in all apps created with Bubble.

@emmanuel maybe engineers know how to fix it?

I know a way that might help, at least if you have dynamic video file url’s.
Add this to an html element and set the width and height to whatever you want, and also set the html element to stretch to fit the element, as it looks better. Replace ‘movie.mp4’ with your video file(url).

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

The video doesn’t show any image until the user touches the play button (at least on mobile) so I recommend using the below code to add a poster that shows the first frame of the video upon load.

  <video width="320" height="240" controls poster="movie.mp4#t=0.1">
      <source src="movie.mp4" type="video/mp4">
    </video>

I hope this helps!

2 Likes

Oh, thanks! I forgot that I can use pure HTML 5))

Can you share more details specifically on how to implement this? Still new to bubble more so with the usage of html5.

I have videos in my database that i would like to play in fullscreen automatically (mobile) when user presses Play