# \[New Plugin\] HTML5 Video Player with Floating Capability

**URL:** <https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895>\
**Category:** Showcase\
**Created:** [December 18, 2018, 6:24am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895 "2018-12-18T06:24:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![bancosapps](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bancosapps](https://forum.bubble.io/u/bancosapps)\
**Post date:** [December 18, 2018, 6:24am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/1 "2018-12-18T06:24:08Z")

</div>

Hello everyone! I have just released a new HTML5 Video Player that supports any video format that HTML5 supports. You can upload your own Static File or use a Dynamic Link as the Video Source.

It also supports “Floating” or “Sticking” to a corner as you scroll below the video. You have the following options to configure the Floating Video:

**Floating Video Supported Positions:**  
Top Left  
Top Right  
Bottom Left  
Bottom Right

If you need to further customize the position so that it’s not all the way in one of the corners, you can add Horizontal Padding and Vertical Padding to move it away from the chosen position. For example, if you chose to stick the video in the Bottom Right of the screen, you could move the video 100px to the left and 100px up by setting the following values:  
**Floating Video Horizontal Padding:** 100  
**Floating Video Vertical Padding:** 100

Here is a sample of the plugin in action:

![video_demo](https://us1.discourse-cdn.com/bubble/original/3X/c/3/c380301f7b10b30df58933f5316b2d72ee20371f.gif)

**Notable Features:**

- Floating Video - When a user scrolls past the video, a “floating” video can stick to the side of the screen so that the video can continue to be watched as the user scrolls.

- Disable Right Clicking - Disable right clicking on the video so that it is more difficult to download/save the video from the webpage.

- Disable Auto-Fullscreen - On many mobile devices, when a video starts playing it will default it to Full Screen mode. Using this video player, you can disable that and let the video play within the web page instead.

- Auto Play - You can have the video automatically start playing when the video source loads.  
**NOTE** : Some browsers disallow this functionality unless the video is muted.

- Hide Native HTML5 Video Controls - You can hide the default Video controls so that you can use your own buttons to control the video.

**Supported Element Actions:**

- Play

- Pause

- Set Video Position

- Set Playback Speed

- Set Volume

- Toggle Mute

- Toggle Play/Pause

**Supported Events:**

- Video Ended

- Video Started to Play

- Video Paused

- Video Seeking Started

- Video Seeking Completed

- Video Position Changed

- Volume Changed

- Media Started Loading

- Media Finished Loading

**Plugin Page:**

> **[HTML5 Video Player Plugin for Bubble, by Bancos Apps](https://bubble.io/plugin/html5-video-player-1544679421691x581364656889921500)**
>
> HTML5 Video Player Plugin page on Bubble, by Bancos Apps. Add HTML5 Video Player in one click to your app. Bubble lets you build web apps without any code.

**Demo page:**  
[https://video-demo-app.bubbleapps.io/](https://video-demo-app.bubbleapps.io/)

If you have any questions, concerns, or feature requests, feel free to reach out to me at [bancosapps@gmail.com](mailto:bancosapps@gmail.com)

I appreciate any feedback or suggestions!

---

<div class="post-metadata">

**Author:** ![di\_lucena](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/di_lucena/32/50410_2.png) [@di\_lucena](https://forum.bubble.io/u/di_lucena)\
**Post date:** [December 18, 2018, 8:52am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/2 "2018-12-18T08:52:36Z")

</div>

This looks amazing!  
I am working on a project in wich I need to set a playlist for every user and give them the ability to play their videos continuosly.  
Is this possible with this plugin?

---

<div class="post-metadata">

**Author:** ![bancosapps](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bancosapps](https://forum.bubble.io/u/bancosapps)\
**Post date:** [December 18, 2018, 4:01pm UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/3 "2018-12-18T16:01:44Z")

</div>

The way the playlist could work with this player right now is that you could have an Event triggered when a video ends, and then you could use the Dynamic Link to control the next video that you want played.

For example, when the Video Ends, you would have the Event set up to change the value of what the Dynamic Link is which would then start the next video. However, that would require you control the playlist and which videos would play next.

If you would like this to be supported in a more integrated way, I’d be happy to hear what your thoughts are for how you would like it to work and I can add it as a new feature.

---

<div class="post-metadata">

**Author:** ![taylor2](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/taylor2/32/29100_2.png) [@taylor2](https://forum.bubble.io/u/taylor2)\
**Post date:** [December 18, 2018, 5:12pm UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/4 "2018-12-18T17:12:32Z")

</div>

Very cool! This will be very useful on my app. I’ll give it a test this week and reach out to you if I have any questions!

---

<div class="post-metadata">

**Author:** ![batuhanbilginn](https://avatars.discourse-cdn.com/v4/letter/b/90db22/32.png) [@batuhanbilginn](https://forum.bubble.io/u/batuhanbilginn)\
**Post date:** [December 19, 2018, 7:53pm UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/5 "2018-12-19T19:53:36Z")

</div>

Hi, thanks for this. Does the plugin support Vimeo?

---

<div class="post-metadata">

**Author:** ![bancosapps](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bancosapps](https://forum.bubble.io/u/bancosapps)\
**Post date:** [December 20, 2018, 5:42am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/6 "2018-12-20T05:42:03Z")

</div>

Right now it should support the Vimeo direct links, but it won’t support the Vimeo videos that don’t provide direct links.

I’m looking into a solution to support the native Vimeo and YouTube video players in addition to the native HTML5 player to be able to handle all Vimeo/YouTube videos.

---

<div class="post-metadata">

**Author:** ![boostsalesgroup](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boostsalesgroup/32/47781_2.png) [@boostsalesgroup](https://forum.bubble.io/u/boostsalesgroup)\
**Post date:** [February 20, 2019, 10:49pm UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/7 "2019-02-20T22:49:31Z")

</div>

I just subscribed… Everything seems perfect. Does it support files that are private in bubble?

---

<div class="post-metadata">

**Author:** ![bancosapps](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bancosapps](https://forum.bubble.io/u/bancosapps)\
**Post date:** [February 25, 2019, 3:46am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/9 "2019-02-25T03:46:26Z")

</div>

Hi @boostsalesgroup, yes you should be able to play files that are private in bubble. As long as you have the link to the private file, you can provide that as the Video Source.

If you find you are unable to use those videos with my Video Player for some reason, feel free to reach out to me at [bancosapps@gmail.com](mailto:bancosapps@gmail.com) and I can help figure out what is going on.

Thanks for the subscription!

---

<div class="post-metadata">

**Author:** ![boostsalesgroup](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boostsalesgroup/32/47781_2.png) [@boostsalesgroup](https://forum.bubble.io/u/boostsalesgroup)\
**Post date:** [February 25, 2019, 8:24am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/10 "2019-02-25T08:24:43Z")

</div>

Hi @bancosapps! I was able to get it work. I think it was my bad in a first place when I set it up.

One thing that comes to my mind… It would be nice to have a option to loop the video.

---

<div class="post-metadata">

**Author:** ![bancosapps](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bancosapps](https://forum.bubble.io/u/bancosapps)\
**Post date:** [February 25, 2019, 6:51pm UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/11 "2019-02-25T18:51:14Z")

</div>

@boostsalesgroup, I think that’s an excellent idea. I will include the “loop” feature in my next update and I can let you know when it is available. Thanks!

---

<div class="post-metadata">

**Author:** ![bancosapps](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bancosapps](https://forum.bubble.io/u/bancosapps)\
**Post date:** [March 6, 2019, 6:03am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/12 "2019-03-06T06:03:27Z")

</div>

@boostsalesgroup, I have now added the option to Loop the video so it will automatically start playing again when the video has finished. There is a new Checkbox on the Plugin called “Looped” to turn on/off this feature.

Thanks for the suggestion!

---

<div class="post-metadata">

**Author:** ![Sam](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sam/32/132693_2.png) [@Sam](https://forum.bubble.io/u/Sam)\
**Post date:** [May 17, 2019, 10:06am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/13 "2019-05-17T10:06:54Z")

</div>

Hi,  
Does the autoplay work on mobile? full screen only or floating as well?

Thanks

---

<div class="post-metadata">

**Author:** ![bancosapps](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bancosapps](https://forum.bubble.io/u/bancosapps)\
**Post date:** [May 18, 2019, 6:20pm UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/14 "2019-05-18T18:20:03Z")

</div>

Hi Sam,

The autoplay should work on mobile, however many mobile web browsers will prevent autoplay from happening unless the video is muted.

Depending on what you would like to do with autoplay, there are various options to work within the mobile browser restrictions. If you have a particular use case in mind for how you would like it to work, I’d be happy to hear what that is to see if it’s something that could be supported within the mobile browser restrictions.

You can also email me at [bancosapps@gmail.com](mailto:bancosapps@gmail.com) if you would like help on how to get certain functionality working with the HTML5 Video Player.

---

<div class="post-metadata">

**Author:** ![Sam](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sam/32/132693_2.png) [@Sam](https://forum.bubble.io/u/Sam)\
**Post date:** [May 19, 2019, 5:38am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/15 "2019-05-19T05:38:30Z")

</div>

Hi Bancosapp,

Thanks!  
The idea is to autoplay whenever the video player is visible in a repeating group / and stop when not visible.  
Is this feasible?

Thanks

---

<div class="post-metadata">

**Author:** ![ben4](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ben4/32/20434_2.png) [@ben4](https://forum.bubble.io/u/ben4)\
**Post date:** [June 21, 2019, 12:14am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/16 "2019-06-21T00:14:03Z")

</div>

Hey there, I am loving the plugin, i am using it everywhere. However, today when i added it to another page in my app, it isn’t able to recognize the Vimeo direct link or any youtube links. Does it actually work with youtube? if so, what link should I be using, I don’t know if youtube having another link. Any suggestions?

---

<div class="post-metadata">

**Author:** ![bancosapps](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bancosapps](https://forum.bubble.io/u/bancosapps)\
**Post date:** [June 21, 2019, 9:25pm UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/17 "2019-06-21T21:25:21Z")

</div>

Hi @ben4,

The Vimeo Direct Links should work, but currently the Youtube videos likely won’t work since they don’t offer any direct links.

I do plan on creating a separate Youtube Video Player plugin with many of the same features, but it will use Youtube’s Video Player instead of the default HTML5 Video Player like my current plugin uses. So it will be limited to what their video player supports.

As for your Vimeo Direct Link problem, if you send me an email at [bancosapps@gmail.com](mailto:bancosapps@gmail.com) I’d be happy to help troubleshoot what could be happening there.

Thanks

---

<div class="post-metadata">

**Author:** ![Sam](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sam/32/132693_2.png) [@Sam](https://forum.bubble.io/u/Sam)\
**Post date:** [August 19, 2019, 10:31am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/18 "2019-08-19T10:31:36Z")

</div>

Hi,

Would be fantastic if you could integrate a Chromecast feature as well.

---

<div class="post-metadata">

**Author:** ![hello.vunela](https://avatars.discourse-cdn.com/v4/letter/h/ad7895/32.png) [@hello.vunela](https://forum.bubble.io/u/hello.vunela)\
**Post date:** [November 6, 2019, 5:41pm UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/19 "2019-11-06T17:41:46Z")

</div>

Hi. I was just wondering do you offer video playlist? like youtube playlist feature? Thank you.

---

<div class="post-metadata">

**Author:** ![nicola.kegel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nicola.kegel/32/34361_2.png) [@nicola.kegel](https://forum.bubble.io/u/nicola.kegel)\
**Post date:** [January 8, 2020, 12:53am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/20 "2020-01-08T00:53:16Z")

</div>

Hi @bancosapps,

just like @hello.vunela I am looking for a video player that allows to play a video playlist. Is that something the HTML5 Video Player can do?  
It is absolutely crucial for my app and so far I cannot find a video player in bubble that behaves well on mobile and does enable playlists.

Thank you,  
Nicola

---

<div class="post-metadata">

**Author:** ![bancosapps](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@bancosapps](https://forum.bubble.io/u/bancosapps)\
**Post date:** [January 10, 2020, 4:59am UTC](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895/21 "2020-01-10T04:59:26Z")

</div>

Hi @nicola.kegel the HTML5 Video Player plugin doesn’t currently directly support playlists, however it does support dynamically changing the Video if there was a Playlist separate from my plugin that could control which video was to be played.

Do you have specific examples of how you would like the Playlist functionality to work with the Video plugin? Feel free to email me at [bancosapps@gmail.com](mailto:bancosapps@gmail.com) if you would like to discuss how you would like the Playlist to work.

[Next page](https://forum.bubble.io/t/new-plugin-html5-video-player-with-floating-capability/44895.md?page=2)
