Services Plugins FAQs

Full screen not working on "plyr" plugin

Plugins
#1

Hi all,

I am currently using the plyr plugin to play youtube and Vimeo videos. I encountered the issue of the full screen not working. When I press the full-screen button the video enters the full screen and immediately returns to its previous position. The video stops playing during this process.

While this sometimes doesn’t happen (the full screen works well), the vast majority of the time the full screen doesn’t work. I have also noticed that it works more often when the browser window takes the full width of the computer screen.

Any insight/help is greatly appreciated!

Thanks!

#2

Hi @columj9,
Thank you for reaching out and for your purchase.
We highly appreciate using the Plyr - Video Player Plugin.

I’ve carefully checked your use case and tried to reproduce it on our side, unfortunately, I couldnt find any issues about going to full-screen mode, the youtube or Vimeo video continues to play when enabling/disabling full-screen mode in the Browser windowed or maximized to full screen.
I’ve recorded a short video that shows that, please check it down below:
https://www.loom.com/share/9d7824d860f54507a2910c767e0d889d

In case you have a different setup or meant something else, please share more details about what issues you’ve encountered.
Namely, screenshots and screencast of your setup, the issue you see, expected result, for screencast recording I can suggest using the Loom tool.

Looking forward to your reply. :pray:
Regards,

#3

Hey @Igor

It seems like this only happens on the new responsive engine. I have included a loom demonstrating the issue. Loom | Free Screen & Video Recording Software | Loom

I opened a blank page - the only elements were a plyr youtube and vimeo video element.

Thanks!

#4

Hello @columj9,
Thank you for your message, and sorry for the late reply due to the weekend.

I’ve tried to reproduce your use case on our side and created a test page, using the new Bubble responsive engine, tested in a few browsers (including Safari) but unfortunately, I couldn’t note any issues. The video continues to play even after going to fullscreen and back.
Please check our test page, if everything works, please compare our setup of the plugin element with yours.

Thank you for your understanding and cooperation.
Looking forward to your reply.
Best regards,

#5

Hi @Igor

Thank you for your reply. I noticed that the layout in the pages you have sent has been set to fixed. To clarify, the full screen works fine in the old responsive layout or when the layout is set to fixed. However, when not set to fixed, and when the video element border is close to the screen border, the fullscreen function doesn’t work.

Everything works when I used your test page. I, unfortunately, can’t replicate your setup because I need the videos to be fully responsive.

Here is an example of one of the pages that use the video element.

#6

Hi @columj9,
Thanks a lot for the provided details.

I was able to reproduce the issue on your page when the browser was restored down. I’ve passed this issue to the dev team for additional analysis.

Once any news will become available, I will let you know asap.

Thank you once again for your patience and cooperation. :pray:
Best regards,

#7

Hi @columj9,
Hope my message finds you well, it’s been a while since my previous reply. :slightly_smiling_face:

By this message, I would like to notify you that our dev team has finished the research for the Plyr - Video Player Plugin, unfortunately, we couldn’t fix the above issue that triggered the video to restart while being played in a windowed browser.
Since the plugin is using a library that plays videos in an Iframe (with sources set from Youtube and Vimeo links) due to the specifics of Bubble, it is re-drawing the Iframe each time the screen of the device is changed and unfortunately, there is nothing to do about it as long as iframes are being processed like this by Bubble.

We’ve also looked into if the library of the Plyr plugin would be updated, but the last version was released about a year ago and it seems that is not maintained anymore.

I can suggest another Video Player plugin, which uses other libraries and works perfectly on the new responsive engine, it allows you to play most video formats simply by uploading a static file or dynamic URL. Its advanced features allow you to set the speed of the playback, and enable auto-play and auto-replay at the end. You can also customize the colors of the play button and the color of the playing bar.

Please check its live demo page which has been adapted to the New Responsive engine, the demo editor page, and let me know if you have additional questions related to this plugin.

Thank you once again for your understanding and cooperation. :pray:
Looking forward to your reply.

Best regards,

#8

Hi, again @columj9,
I have some great news regarding the Plyr - Video Player Plugin. :slightly_smiling_face:

We’ve recently updated the plugin to Version: 1.22.0 - it was adapted to the new responsive engine.
Please update the plugin inside your app to the latest version and let me know if that solved the issue about going full screen and being responsive on any screen size.

Hope you are still using our plugin inside your app and the newest version will solve the above-reported issues.
Thank you once again and looking forward to your reply. :pray:
All the best,