Templates Plugins Courses

Plyr plugin: hide and disable controls + playsinline (crucial for mobile!)

Hey guys, happy to see the Plyr plugin working like a charm.

Two things for this to be good for my use case:

  1. How can I disable and hide controls?
  2. For HTML5 video on mobile, there’s this wonderful tag “playsinline” that allows it to play right where it is. Right now play makes the video go fullscreen.

Please tell me if it’s possible to accomplish these two things.

Edit: if there’s any code that would need to be added to remove controls entirely from showing, am also willing to do that if you instruct me how to @alex.grimacovschi, thanks!

Additionally, I can’t seem to find the Plyr actions (not under element in the WF), specifically, when the player instance is ready, as per the documenation:

I managed to hide the controls with CSS by inspecting the element with:

.plyr__controls {
display: none;
}

I tried to add the attribute playsinline to the actual video with:

var v = document.getElementById(‘videoID);
v.setAttribute('playsinline', '');

I inspected the video container and found the video id:
image

This usually works, but getting an error with the plugin. Not sure why.

:hot_face: Finally, still don’t know how to trigger an action when the video “Is ready”.

Would love some help here guys! @alexander

Hi @alejandrowunderlich,

Thanks for reaching out.

This one is only possible with a custom CSS workaround, which I’m glad you managed to implement.

I’m afraid it would not be possible with our plugin at this point, but could you please share a couple of screenshots of your app and console logs, so we can check on it and see whether or not it is possible to implement the playsinline.

This is actually an event, not an action. You can simply use it in your workflow:

And set any actions you’d like to it, but just make sure you have the plugin element on page.

Hope it helps.

Best,
Alex

This is not awesome. To have to play videos on fullscreen on mobile every time is not ideal for all situations. See the Youtube app, for example. It would be great if you could address this asap, or simply help me implement it.

So when running the script I showed above, I get this error.

EDIT: play() when element ready did work if I’m on screen.

This is how I’m trying to add the playsinline attribute:

This worked for adding the attribute to a normal html5 video element, but not for your plugin. I’m a beginner when it comes to code, so not entirely sure what’s happening.

Hi @alejandrowunderlich,

Thanks for feedback. Please let us check on it and I’ll get back to you with a reply on this matter asap!

Best,
Alex

1 Like

Thanks! After a little testing, the fundamental problem is clear now: the id of the plyr video changes each time it loads!

Refresh 1: image
Refresh 2: image

So I can’t get the element by ID to set the attribute. Very odd that this changes every time the page loads.

Can you just hardcode playsinline into the plugin? @alexander There are no drawbacks to adding playsinline, only benefits to the end user (who can always tap on fullscreen to expand the video).

Oh well… I built my own HTML5 video player with playsinline and then exposed video states, current time, ended playback, etc and other info using the wonderful Toolbox Plugin + some JS.

Your plugin would have saved some time, but with its current limited features and lack of support for Mobile made it as a bad choice for my particular use case.

Thanks for the time, regardless. I still strongly recommend you guys add playsinline attribute to the video element.

1 Like

Hi @alejandrowunderlich,

Thanks for your feedback. It is not possible to customize the plugin on your side, but we’ll certainly consider this feature as a future improvement!

Just a couple of notes here.

This DOM error:

image

Is popping up when you try to autoplay the video, meaning you set the workflow on page load, to actually play it. This is browsers new policy that doesn’t support the autoplay feature, unfortunately, considering it a bad user experience and may cause some trouble.

More information can be found here:

However, it is still possible to use Plyr plugin with playsinline, but with this workaround script:

image

For plugin’s element:

Hope it helps.

Thanks!

1 Like