How to properly design video player controls for iPhone X

Question

With the addition of safe area that accounts for the new swipe control (which replaces the home button) and the top notch on iPhone X, I am curious as to what the proper design guidelines are for displaying video.

I looked over the design video and documentation that Apple released briefly after announcing the iPhone X, but there doesn't seem to be too much specifically related to designing for video playback.

How exactly should a seek bar that is normally positioned at the very bottom of the screen work? Is there a way to have the swipe-up control hidden and use edge-protection to keep it hidden when performing a left/right swipe for adjusting video position using a seek bar?

Or would the expected approach be to constrain the bottom of the seek bar view to the bottom edge of the safe area so that the swipe up control is never impeded? This is what seems most likely based off of the iPhone X design guideline documentation.

Answer 1

In order to avoid conflicts with the home indicator, place your controls within the safe area.

It is possible to hide the home indicator when displaying passive content such as video, and require the user to swipe up from the bottom of the screen twice to go home. However, it might be more complex (and visually distracting to the user) to be moving your controls up and down to account for this change.

The easiest solution is to move your video controls above the home indicator on iPhone X by respecting the safe area. On all other devices they will remain at the bottom of the screen, but on the iPhone X they will be offset from the bottom.

More information about safe areas and home indicators can be found in Apple's Human Interface Guidelines: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/