Beautiful Video Background View Using UIWebView(Objective-C & Swift 3.0)

UI Web view video  background

In order to create beautiful Background View Using UIWebView in Objective-C & Swift 3.0

Do Pre-work: Processing the Video

Prepare a video that you desire to play as background. There are hundreds of software and web applications that help in converting video to GIF file and also crop them into the iPhone screen size for best result. This guide tell in detail  how to do that and more resources are available online. Here I will use software GIF Brewery.


Adding the GIF File into Your Xcode Project

It is quite similar to adding other resource files. Simply drag your GIF file in project navigator

UI Web View video background

1. Coding

Both Objective-C and Swift will be used. All code is written in viewDidLoad method of the landing view controller. Create a file path of the GIF file and before you use it to read the GIF you imported.


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

NSData *gif = [NSData dataWithContentsOfFile:filePath];


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

let gif = NSData(contentsOfFile: filePath!)


2. Creation
UIWebView need to be created and GIF NSData need to be added as its data source. Set the frame size according to iPhone screen in order to make it as background. As UIWebView acts like a scroll view you need to set its user interaction to “False” and add UIWebView to your main view.


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];



let webViewBG = UIWebView(frame: self.view.frame)

webViewBG.loadData(gif!, MIMEType: “image/gif”, textEncodingName: String(), baseURL: NSUrl())

webViewBG.userInteractionEnabled = false;



3.  Optional:
For adding other buttons on the background a black filter view of  0.05 alpha value used to cover the UIWebView. This will fade out the background and let the buttons and titles stands out more.


UIView *filter = [[UIView alloc] initWithFrame:self.view.frame];

filter.backgroundColor = [UIColor blackColor];

filter.alpha = 0.05;

[self.view addSubview:filter];


Let filter = UIView()

filter.frame = self.view.frame

filter.backgroundColor = UIColor.blackColor()

filter.alpha = 0.05


  UI Web View video Backgroundd


All Image Credit:

Looking forward to respond to your queries and comments as far as creating beautiful Background View Using UIWebView is concerned. In the meanwhile you can learn more about Fragment Manager in Android

About Singsys Pte. Ltd. Singsys is a solution provider that offer user friendly solution on cutting edge technologies to engage customers and boost your brand online results from a set of certified developers, designers who prefer optimized utilization of the available resources to align client’s idea with their skillset to reflect it into a Mobile applicationWeb application or an E-commerce solution


You may be interested in following:

  1. iOS Development Trends in 2017 beyond Tips and Tricks
  2. Advantages of Choosing Swift over Objective – C for iOS developers