Embedding YouTube Within iPhone Apps

October 8, 2011 by James Brocklehurst | 8 Comments

Here is a method I recently devised for getting YouTube videos to work in a useable and clean way within iPhone Apps. It assumes a basic familiarity with Xcode 4 and Objective-C.

Embed YouTube in iPhone App

Sample Video “Cycles” by Cyriak Harris

Download Source (.zip package, 33KB)

What This Method Does

There are several offerings out there for embedding YouTube into your app, most of which are variations on the code provided by YouTube themselves, and this is no different. What is new about this approach is that it positions the thumbnail centrally in all device orientations using some tweaked CSS, places the thumbnail against a black background (which is trickier to work out than it sounds), and enables you to pass a video URL dynamically to the embed code.

The example I give launches the video in a modal view, which is useful if you are working with a Tab Bar application or Navigation Controller stack with a portrait-only orientation, but still want to have videos displayed landscape. Using a modal gets around the issue of all views in a Tab Bar application needing to adhere to the same orientation as outlined by Matt Long, or any other orientation problems. You could, of course, adapt the code to remove the use of a modal if you so wished.

The Launcher View

In this example I am using two view controller classes, one that manages a XIB with some ‘view video’ buttons, and then one for the display of the actual video.

First, create a UIViewController subclass with an associated XIB called “VideoLauncherViewController”. In the interface file, add the following:

#import <UIKit/UIKit.h>
#import "VideoViewController.h"

@interface VideoLauncherViewController : UIViewController {

    NSString *videoURL;

}

@property (nonatomic, retain) NSString *videoURL;

- (IBAction) launchVideo;

@end

Nothing too complex here, just a property to hold the URL for the video and a method declaration. Once the property has been synthesized and released, this is how the method should be implemented in VideoLauncherViewController.m:

- (IBAction) launchVideo {

self.videoURL = @"http://youtube.com/embed/-0Xa4bHcJu8";

VideoViewController *videoViewController = [[[VideoViewController alloc] initWithNibName:nil bundle:nil] retain];

videoViewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
videoViewController.videoURL = self.videoURL;

[self presentModalViewController:videoViewController animated:YES];

[videoViewController release];
}

You’ll get an error about videoViewController not having a videoURL property, but this will get sorted out once it is added in the next step.

The last section of the URL string, found directly after youtube.com/embed/, can be substituted for that of any YouTube video. Just use the ‘share’ button on the YouTube page to get the relevant code:

Getting a Video URL

Passing this URL value to the next view in the way shown above means you could extend the class to make the choice of video user selected, or altered programatically, for instance.

In the XIB, make a button, and bind it to the method, as shown below (click to enlarge):

The Video View

Now create a second UIViewController subclass and XIB called “VideoViewController”. Here’s the interface:

#import <UIKit/UIKit.h>

@interface VideoViewController : UIViewController {

    IBOutlet UIWebView *videoView;
    NSString *videoURL;
    NSString *videoHTML;

}

@property(nonatomic, retain) IBOutlet UIWebView *videoView;
@property(nonatomic, retain) NSString *videoURL;
@property(nonatomic, retain) NSString *videoHTML;

- (void) embedYouTube;
- (IBAction) closeModal;

@end

Again, synthesize and release the properties in the implementation, then add these methods:

- (void)embedYouTube {

videoHTML = [NSString stringWithFormat:@"\
<html>\
<head>\
<style type=\"text/css\">\
iframe {position:absolute; top:50%%; margin-top:-130px;}\
body {background-color:#000; margin:0;}\
</style>\
</head>\
<body>\
<iframe width=\"100%%\" height=\"240px\" src=\"%@\" frameborder=\"0\" allowfullscreen></iframe>\
</body>\
</html>", videoURL];

[videoView loadHTMLString:videoHTML baseURL:nil];
}

- (IBAction) closeModal {
[self dismissModalViewControllerAnimated:YES];
}

Lets go through some of that.

First of all we assign a string of HTML code to the videoHTML property, which will be used to embed the video within a UIWebView. The HTML contains some inline CSS for centering the video correctly on the screen. Note that some characters in the string need to be escaped, notably double quotation marks with a backslash ‘\’ and the percent sign with an extra ‘%’. New lines also need to be preceded with a backslash.

Because this is a stringWithFormat, we can also insert dynamic values, so the %@ symbols found within the src=”" attribute are replaced by whatever value is held by the videoURL property, as sent through from the Launcher view, and identified there at the end of the message.

The next step is to add the following to the - (void)viewDidLoad method:

videoView.backgroundColor = [UIColor blackColor];
videoView.opaque = NO;

[self embedYouTube];

This code sorts out the black background mentioned earlier (trying to achieve this is Interface Builder doesn’t work), plus there is a message to run the embed method.

Finally you need to alter - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation so it is simply returning YES to allow for all orientations:

    // Return YES for supported orientations
    return YES;

VideoView XIB

Open the VideoViewController.xib, and drag a UIWebView instance from the library onto the canvas. It should scale to fill the full width and height of the canvas.

Next, download and unzip this button graphic, and add both sizes of the ‘close-dark.png’ image to your project.

Drag a Round Rect Button from the library and place it roughly in the top left corner of your main view.

In the Attributes Inspector, set the Type to ‘Custom’, and the background image for the button as ‘close-dark.png’. Also change the Title to ‘Close’, the text colour to white and the font size to 14.0.

In the Size Inspector, set the X position to 36, the Y position to 24, the width to 60 and the height to 30.

Select File’s Owner and bind the videoView outlet to the UIWebView instance and the closeModal action to the ‘Close’ button.

When you are done, it should look like the example below (click to enlarge):

The Result

This should work both in the simulator and an actual device.

When you build and run and tap the button on the launch screen, the modal view is presented with the static video thumbnail.

Tapping the thumbnail will play the video fullscreen, which can be viewed in either landscape or portrait orientations. Pressing the blue ‘Done’ button will return the user to the thumbnail screen. Pressing the ‘Close’ button on the thumbnail screen will dismiss this modal view.