Full screen player on iOS12 Safari for iPhone showing grey sidebars

[Solved]

Jordan 2 years, 8 months ago

Hello,

I am having an issue where the full screen player for iOS12 Safari for iPhone 12 Pro is showing grey sidebars. I imagine other iPhone’s such as the iPhone 11 would be able to reproduce this too. Please see the image below:

https://i.postimg.cc/L8cbSDWq/grey-bars.jpg

This grey color is coming from the background color of my website. It appears that if the video’s aspect ratio does not completely match the iPhone’s screen aspect ratio that it is not completely filling the screen and showing the background of my website. I do not have an issue in portrait mode on my iPhone, or any issue on PC, Android Tablet, or iPad. (I have not tested on Android Phone.) See the image below to verify my skin settings:

https://i.postimg.cc/j2BzfgPP/Screenshot-2021-01-15-182821.png

See the image below to verify my Mobile settings:

https://i.postimg.cc/sDRP38fC/mobile-settings.png

I have tried the other Mobile settings options without any change.

I am wondering if this is a problem with my theme, Donovan, by ThemeZee, or a limitation of the FV Player plugin, and if there is anyway to fix this?

Here is a test video you can use to reproduce the issue: https://springermemories.ca/2021/01/test-video/

Thanks for any help or insight you can provide!

Viewing 3 replies - 1 through 3 (of 3 total)

Mária Stašová 3 years ago

Hello Jordan,

sorry for the late reply.

Thank you for bringing this to our attention, I will make sure to forward this to our development team and see what we can do about it.

Thanks,
Maria
Martin 3 years ago
Hello Jordan,

you are exactly right – your phone screen is wider than the video, so the bars have to be added otherwise the video would have to be cropped – you wouldn’t see the top and bottom part of it.

However these should be black and not draw attention. Does your iPhone have screen with rounded borders? In that case you need to set a special HTML meta tag to let your website use the entire screen or set the color of the unused part.

Unfortunately this cannot be controlled after the page has been loaded. So we cannot adjust it as you enter fullscreen.

Please put this up in your theme for a test:
```
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
```
Or you can set the background-color CSS property of body and iPhone will use that color.

Thanks,
Martin
Jordan 3 years ago

Thank you. I was missing the ‘viewport-fit=cover’ option. Grey bars are now gone.

Viewing 3 replies - 1 through 3 (of 3 total)