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

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.

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.

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 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.