Fresh Beginning

Adding custom Media content into UIWebView

Jayesh Kawli -

Recently I was working on the app to show custom media content in the UIWebView. This media could be

  • Images
  • Regular videos
  • YouTube videos
  • PDF Files

In this post, I will show how to handle these media types

  • Images

  • Local images

    If you already have images in your local directory structure, then you can simply refer to image in the `UIWebView` directly using image `src` attribute as follows:

    Load the main bundle path as a base URL before loading any content in the WebView


NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];`

And specify image name in the HTML string. The value of src attribute is same as the name of local image file


NSString* htmlImageString = @"<img border='0' src='[name_and_extension_of_image_to_load]' width='[width]' height='[height]'>"

Now load this HTML string in the webView along with specifying base URL,

[_webView loadHTMLString:htmlImageString baseURL:baseURL];

  • Remote images

    If you are loading remote images specified with URL, it's even simpler to only specify image URL in the src attribute of an image tag,


NSString* htmlRemoteImageString = @"<img border='0' src='[url_path_to_image_to_load]' width='[width]' height='[height]'^gt;"

And then along with HTML string, load the image content in the UIWebView


[_webView loadHTMLString:htmlRemoteImageString baseURL:baseURL];

  • Regular Videos

    If you are loading videos from remote sources such as vzaar or vimeo, it's pretty straightforward too.

    Just load an HTML string in the UIWebView as follows,


NSString *videoURL = @"http://view.vzaar.com/105214.video";   
NSString* arbitraryVideoString = [NSString stringWithFormat:@"<iframe id='playerId' type='text/html' width='100' height='100' src='%@' frameborder='0'>", videoURL];`

Once this is done, load the HTML string in the UIWebView like,


[self.webView loadHTMLString:arbitraryVideoString baseURL: nil];

Note that due to iOS 9 SSL feature, all URLs loaded in the app should be requested over https. If not, you might need to add exception to the application plist file. But it's strongly recommended to transport all traffic over https

  • YouTube videos

NSString* youTubeVideoIdentifier = @"83_H6cAQ16Q"  
NSString* youTubeVideoHTML = [NSString stringWithFormat:@"<embed id="yt" src="https://www.youtube.com/v/%@" type="application/x-shockwave-flash" width="100" height="100"><embed>", youTubeVideoIdentifier];

And simply load this HTML string into UIWebView


[self.webView loadHTMLString:arbitraryVideoString baseURL: nil];

Compared to custom video, it's easier to deal with transport layer security for YouTube videos as Google makes sure all YouTube content is transported over https protocol.

  • PDF Documents

Lastly, here is how you can embed PDF documents in the UIWebView. For presentation purpose instead of simply adding link to PDF documents we will add nice PDF
icon. This will act as link and will take user to the actual document.


 NSString* pathToPDFDocument   = [pdf_document_url];                          
 NSString* PDFHTMLStringToLoad = [NSString stringWithFormat:@"
<a href=\"%@\"><img border='0' src='[path_to_pdf_icon]' width='50' height='50'></a>", pathToPDFDocument];

To load the image icon, you will have to do something very similar to steps mentioned above,

Get the base bundle URL for an app


NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];

And load the HTML string with this path as a base URL


  [self.webView loadHTMLString:PDFHTMLStringToLoad baseURL: path];

In the above examples, I have added arbitrary icon, image and sizes. You can customize them based on the need. It's only a matter of passing them to a parameterized strings.