VideoPress: play button remains visible on top of video after exiting full screen

[jobakb]

Currently VideoPress looks great on computer browsers. Please ensure that it has the same skin on mobile platforms as it is on the desktop browsers. It should also be tested to work perfectly well on these devices

[jeherve]

Please ensure that it has the same skin on mobile platforms as it is on the desktop browsers.

The player should look the same on mobile as it does on desktop. Have you experienced issues with the player in the past? If so, could you post a link to a page where you've seen some issues, and let us know what device and browser you used? Screenshots can also be helpful.

Thank you.

[jeherve]

On chrome (android) it does not display the dark skin. It displays the chrome default media player

I can't seem to be able to reproduce this. Could you make a screenshot of what you see on your end?

it automatically switches to full screen

This is tracked here: #8092

the download button clearly visible

This is tracked here: #9603

On firefox (android), it displays the skin but when you preess play, the video plays with the play button still visible and no controls showing

Could you share a screenshot of what you see for this as well?

Thank you!

[jeherve]

Thank you. Since all issues but the Firefox one are tracked elsewhere, I'll edit the description of this issue to track the issues you're having in Firefox.

[jeherve]

Could you let us know what version of Firefox Mobile you are currently using?

[jobakb]

the firefox version is 60.0.1
also tested on a freshly installed firefox on another android device last night

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[joendotcom]

@jeherve I can confirm this behavior in Chrome as well.

Steps to Reproduce

1. Load https://videopress.com/ on a mobile
2. Click Play on demo video (it goes fullscreen)
3. Go out of fullscreen

Expected Result

Video plays normally.

Actual Result

Video continues playing, but with play button and title floating on top.

Via 1891382-zen

[coder-karen]

@jeherve regarding the above issue (with 1891382-zen), the version of Chrome in question is 73.0. Would you have any insight on what could be causing this?

[jeherve]

I don't know yet, but I'll edit the description to mention that it is now happening in more browsers. :(

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[anaemnesis]

Bumping as we received a request for an update in 2422573-zen about this issue. Letting them know no movement yet.

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[KokkieH]

Another report in 3194751-zen ( WordPress.com simple site)

Also confirmed myself in Firefox on Android.

[htdat]

3588222-zen

[bydik]

I don't know why this is not resolved yet!

[lrtottenham]

8479524-zen

I was able to reproduce in Safari and Chrome on iOS.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 1891382-zen
• 2422573-zen
• 3194751-zen
• 3588222-zen
• 8479524-zen

[IKAPIA-revista]

The issue where the Play/Pause button keeps staying on top of all layers after opening the menu to choose parameters such as Video Quality and Speed keeps occurring in different browsers on mobile devices, such as Chrome and Safari.

In the past we have had constant communication with the support team with suggestions for improvement for Videopress. In this case, Jetpack/Videopress support has recommended that we post in this thread to get it directly to the development team. As we are interested in providing the best player quality to our users, we have been looking for options to help fix this issue with the Play button.

Please consider the following CSS codes as a suggestion to check and confirm if it works, and let us know the results.

1. To prevent the Play/Pause button on top above the Speed/Quality floating menu, try setting the control bar one level higher with:

.video-js .vjs-control-bar 
{
    z-index: 2;
}

2. On the other hand, on mobile devices, the progress bar looks very tall and can sometimes be annoying. Perhaps it can be reduced to a height of about 20-25px for certain screen sizes (maybe @media screen and (max-width:600px))? Consider including the rest of the CSS needed to make this setting work correctly with the VideoPress layout and the rest of the player buttons.

.video-js.vjs-videopress.vjs-touch-enabled .vjs-control-bar 
{
     padding-bottom: 33px;
}
.video-js.vjs-videopress.vjs-touch-enabled .vjs-progress-control .vjs-progress-holder 
{
     height: 22px;
}

3. Finally, it may be useful that the Play button (and any other information that you consider should improve its visibility) has a shading, as it is a white image and in videos with white or light backgrounds it is not well visualised. It can also be added by CSS, I give an example for the play button, here consider applying what best fits with the visual style and design of VideoPress:

.video-js.vjs-videopress.vjs-touch-enabled.vjs-has-started button.vjs-control.vjs-play-control.videopress-touch-play-toggle .vjs-icon-placeholder 
{
   filter: drop-shadow(0 0 15px rgba(0,0,0,0.25));
}

We hope these suggestions are helpful, please let us know.

Attached screenshot iPhone (iOS 17) with Safari:

[mashikag]

The following fix was incorporated and deployed. Thanks for the involvment and the contribution! 🙌

To prevent the Play/Pause button on top above the Speed/Quality floating menu, try setting the control bar one level higher with:
.video-js .vjs-control-bar
{
z-index: 2;
}

---

We are still liaising whether we will incorporate the rest of the suggested styling improvements.
p1726242344351119/1725446114.971669-slack-C02LT75D3

[mashikag]

2. On the other hand, on mobile devices, the progress bar looks very tall and can sometimes be annoying. Perhaps it can be reduced to a height of about 20-25px for certain screen sizes (maybe https://github.com/media screen and (max-width:600px))? Consider including the rest of the CSS needed to make this setting work correctly with the VideoPress layout and the rest of the player buttons.
   .video-js.vjs-videopress.vjs-touch-enabled .vjs-control-bar
   {
   padding-bottom: 33px;
   }
   .video-js.vjs-videopress.vjs-touch-enabled .vjs-progress-control .vjs-progress-holder
   {
   height: 22px;
   }

First of all thank you for providing the suggested code fix. This is very appreciated! 🙇

Now, regarding the actual height of the progress bar, I have a little more background. The tall bar on mobile is designed to make it easier to tap with your thumb. If it’s too small, it becomes difficult to use reliably. Currently, it’s 32px tall, which is already below the recommended 44px for mobile touch targets. Reducing it further could create usability problems. Therefore we made the call not reduce the height of the bar on mobile. I hope our reasoning is understandable.

[mashikag]

Finally, it may be useful that the Play button (and any other information that you consider should improve its visibility) has a shading, as it is a white image and in videos with white or light backgrounds it is not well visualised. It can also be added by CSS, I give an example for the play button, here consider applying what best fits with the visual style and design of VideoPress:
.video-js.vjs-videopress.vjs-touch-enabled.vjs-has-started button.vjs-control.vjs-play-control.videopress-touch-play-toggle .vjs-icon-placeholder
{
filter: drop-shadow(0 0 15px rgba(0,0,0,0.25));
}

Once again, we greatly appreciate your suggestion and have given it consideration. However, as VideoPress feature development is not a high priority at the moment, implementing the change would require coordination with multiple teams (design, development) and a review of other player UI components to ensure consistency. Despite the simplicity of the code change, we have decided not to pursue this suggestion at this time.

[mashikag]

Now, that the issues reported in the #9602 (comment) are addressed I am proceeding to close the issue.