iOS Video Backgrounds

Kai Schaller
Mar 12, 2015 · 2 min read

Note: MPMoviePlayerController is deprecated in iOS 9. The Swift version of the demo code has been updated to use AVPlayer (thanks to GitHub user Harout360!) and can be found at https://github.com/kschaller/ios-video-background-swift.


I’ve been seeing more and more of these nicely looping video backgrounds show up in big-name apps, especially on their login and onboarding screens. How did they do it?

Spotify’s spiffy new video background.

There are a few different methods out there for achieving this effect, such as using an animated GIF in a UIWebView; initially I was going to write about how to use a GLKView to handle frame-by-frame rendering on the GPU, but it turns out there’s a much easier method that also appears to be fairly efficient in terms of memory and CPU usage.

You can grab both Swift and Objective-C versions of the code below from GitHub.

First things first, import the MediaPlayer framework:

@import MediaPlayer;

Next, we create a new MPMoviePlayerController instance within our viewDidLoad: method.

NSURL *videoURL = [[NSBundle mainBundle]   URLForResource:@"video" withExtension:@"mov"];

self.moviePlayer = [[MPMoviePlayerController alloc] initWithContentURL:videoURL];
self.moviePlayer.controlStyle = MPMovieControlStyleNone;
self.moviePlayer.scalingMode = MPMovieScalingModeAspectFill;
self.moviePlayer.view.frame = self.view.frame;[self.view insertSubview:self.moviePlayer.view atIndex:0];[self.moviePlayer play];

While we’re in viewDidLoad:, let’s go ahead and add a notification handler to help us loop the video.

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(loopVideo) name:MPMoviePlayerPlaybackDidFinishNotification object:self.moviePlayer];

Time to set up that loopVideo function we’re calling in the above block.

- (void)loopVideo {
[self.moviePlayer play];
}

And we’re done! Now all that’s left to do is throw a few UI elements on top. Here’s what it looks like (sans UI) on an iPhone 6 Plus device:

This turned out to be much simpler than I was trying to make it. It’s definitely worth your time to crop the video to dimensions appropriate for the devices and orientations you’re targeting in order to save on file size. Remember: users likely aren’t going to be spending much time on these screens, so there’s no need to include a 50 MB, 2 minute hi-def video in your app bundle — keep it short and interesting and it will be one of those nice little touches that can make your app stand out from the crowd.

For good measure, here are a couple more apps that I found with video backgrounds:

Tumblr uses a city scene with subtle motion.
Vine throws a blurry party for us in the background.
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store