• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty
Affordable VAST/VPAID for Wordpress has arrived. Serve ads with your videos starting today!

White bands at side of full screen video on iPhone? Here’s the fix…

16 June 2023 / Alec Kinnear / Leave a Comment

Apple is a peculiar company. On one hand Apple gives so much in terms of user friendliness and default well-made design. On the other hand, often Apple falls over themselves to make their technology complex and non-user friendly with awful applications like iTunes transforming into the not much better Apple Music, where just trying to like a song requires three tricky clicks (Spotify, Qobuz, Tidal, it’s just a single touch on a heart).

One area where we’ve faced some issues with video playback is full screen on iPhones. Sometimes the sidebars are white.

iPhone video playback white sidebars

There is a way to fix it.

You just need to add this metatag to your theme header.php file:

<meta name="viewport" content="viewport-fit=cover">

Your website might have the standard mobile viewport meta tag already:

<meta name="viewport" content="width=device-width, initial-scale=1">

In that case append the required part into it:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

If you use a Genesis theme, this code will work:

add_filter( 'genesis_viewport_value', function( $value ) {
  return 'width=device-width, initial-scale=1, viewport-fit=cover';
});

If you use a block theme then it’s going to be a bit harder as WordPress does add the meta tag automatically. Use this code in your theme functions.php file:

<?php // Remove the standard viewport meta tag of Block Themes
add_action( 'wp_head', 'remove_block_template_viewport_meta_tag', -1 );

function remove_block_template_viewport_meta_tag() {
  remove_action( 'wp_head', '_block_template_viewport_meta_tag', 0 );
}

// Add the new improved viewport meta tag
add_action( 'wp_head', 'custom_block_template_viewport_meta_tag', 0 );

function custom_block_template_viewport_meta_tag() {
  echo '<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />' . "n";
}

Please note that your block theme might not have that file and you will have to create it.

FV Player in fullscreen playing once the viewport has been adjusted

In FV Player v8 we will include the necessary metatag by default. For now, if your visitors complain about white bars, just add the tag above.

If you notice any other unusual behaviour in full screen behaviour on iPhone or Android with FV Player, please let us know in the comments. Perfect, distraction free full screen playback is extremely important to allow your visitors to just enjoy the video and forget entirely about technology while they do so.

Overall we wish the iPhone browsers would support the HTML5 fullscreen mode. All we can do is just use the CSS tricks to make the player cover the whole screen. That means the browser location bar or device gestures can still interfere. If you post simple videos without custom captions or popups, you can set FV Player to use the native fullscreen on mobile which is more robust.

Alec Kinnear

Alec Kinnear

Alec has been helping businesses succeed online since 2000. Alec is an SEM expert with a background in advertising, as a former Head of Television for Grey Moscow and Senior Television Producer for Bates, Saatchi and Saatchi Russia.

Categories: FV Player Tags: fv player, iphones, video

Related Posts

  1. Full screen player on iOS12 Safari for iPhone showing grey sidebars

    Full screen player on iOS12 Safari for iPhone showing grey sidebars

  2. white edges visible on iphone full screen mode

    white edges visible on iphone full screen mode

  3. Full screen iPad iPhone issues

    Full screen iPad iPhone issues

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You can click here to Subscribe without commenting

Primary Sidebar

Categories

  • Business
  • Camera Reviews
  • Case Studies
  • Design
  • FV Player
  • Internet Marketing
  • IT
  • Life
  • SEO
  • Slovak
  • Video of the Week
  • WordPress

Footer

Our Plugins

  • FV WordPress Flowplayer
  • FV Thoughtful Comments
  • FV Simpler SEO
  • FV Antispam
  • FV Gravatar Cache
  • FV Testimonials

Free Tools

  • Pandoc Online
  • Article spinner
  • WordPress Password Finder
  • Delete LinkedIn Account
  • Responsive Design Calculator
Foliovision logo
All materials © 2025 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in .

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!