iOS: Make an Awesome Video Background View Using UIWebView (Objective-C & Swift 3.0)

Oct 31 2016 updates (Check out the GitHub link at the end):

• Fix the “app doesn’t take up the whole screen” bug. (by adding a launch screen storyboard)
• GIF will now be full-screen for any device without loosing aspect ratio. (Instead of loading gif directly, now using an html to load the gif so you can maintain the gif size by CSS)
• Migrated to swift 3.0
• Switch to auto-layout

Oct 6 2015 update: Adjusted for swift 2.0.

(If you wanna get in contact or drop a message, feel free to shoot me an email pjin.elvin@gmail.com)

Remark: Using GIF is not the only solution. It’s just one possible way of doing the effect. I personally prefer video player, but still, this GIF solution is an option. For direct steps, jump to section “Pre-work” below.

If you are a user of Spotify iOS app, you may notice that in the new version of this app, they used a playing video as the landing view background. This is a cooler design to me when compared to static image background. If you haven’t had a chance to see designs like this, here is a quick preview of my final result:

Just for your interest, I took the railway slo-mo video on the train from Berlin to Graz ;)

So I was thinking of re-creating the same effect as a coding practice. First question: How? The first method I came up with was somehow to create a video player and let it repeatedly play a video file in a background view. But I also want to place other elements on the view and I don’t need any sound of the video.

Then I came to GIF file. Now the problem is: How am I gonna place a GIF on a view? As far as I know, neither UIImageView nor UIImage support GIF animations. Even if UIImageView supports adding multiple images and animating between them, do we really need to create that much images from a video and add all of them into the project? The pre-work for processing the video would be a little bit complicated. Then what support GIFs? UIWebView.

Pre-work: Processing the Video

Prepare a video that you want to play as background. There are tons of software and web applications that you can use to convert your video to GIF file and also crop them into the iPhone screen size if you want the best result. There is a very good guide to show you how to do that and more resources are out there that you can get from google. Here I used a software called GIF Brewery. And there is also a detailed tutorial page for this app, which is very easy to follow.

Add Your GIF File into Your Xcode Project

Like adding any other resource files, just drag your GIF file into your project navigator.

Time to Code

I’ll use both Objective-C and Swift to show you how to achieve the goal. All the codes is written in viewDidLoad method of the landing view controller.

1. Create a file path of the GIF file and then use it to read the GIF you imported.

Objective-C:

NSString *filePath = [[NSBundle mainBundle] pathForResource:@”railway” ofType:@”gif”];
NSData *gif = [NSData dataWithContentsOfFile:filePath];

Swift:

let filePath = NSBundle.mainBundle().pathForResource(“railway”, ofType: “gif”)
let gif = NSData(contentsOfFile: filePath!)

2. Create a UIWebView and add the GIF NSData as its data source. Because you want to make it as a background, so you need to set the frame size according to the iPhone screen. Also, because UIWebView acts like a scroll view, you want to set its user interaction to “False”. Then add this UIWebView to your main view.

Objective-C:

UIWebView *webViewBG = [[UIWebView alloc] initWithFrame:self.view.frame];
[webViewBG loadData:gif MIMEType:@”image/gif” textEncodingName:nil baseURL:nil];
webViewBG.userInteractionEnabled = NO;
[self.view addSubview:webViewBG];

Swift:

let webViewBG = UIWebView(frame: self.view.frame)
webViewBG.loadData(gif!, MIMEType: “image/gif”, textEncodingName: String(), baseURL: NSUrl())
webViewBG.userInteractionEnabled = false;
self.view.addSubview(webViewBG)

3. Optional: I want to add other buttons on my background, so I used another black filter view with 0.05 alpha value to cover the UIWebView. This fade out the background and let the buttons and titles stands out more.

Objective-C:

UIView *filter = [[UIView alloc] initWithFrame:self.view.frame];
filter.backgroundColor = [UIColor blackColor];
filter.alpha = 0.05;
[self.view addSubview:filter];

Swift:

Let filter = UIView()
filter.frame = self.view.frame
filter.backgroundColor = UIColor.blackColor()
filter.alpha = 0.05
self.view.addSubview(filter)

4. Add any other things you want. Done!

Summary

The complete project is on my GitHub, feel free to download and play with it. The example GIF file is also in it. This may not be the best method to get the result, so you are more than welcome to discuss in the comment.