Display YouTube Videos Without Exiting Your Application

If you’d like to play a YouTube video inside your application there are two common ways to do this, by launching the YouTube player and by using a UIWebview.

Launch Native YouTube Application

This approach will exit your application and begin the YouTube player on the iPhone:

[[UIApplication sharedApplication] 
   openURL:[NSURL URLWithString:@"http://www.youtube.com/watch?v=gczw0WRmHQU"]];

Clickable Thumbnail and UIWebview

If you’ve noticed in Safari on the iPhone, when the browser finds a YouTube video reference, a clickable link is created, which will start the movie when tapped without leaving Safari.

We can use the same approach within an iPhone application using a UIWebView, including a clickable link with a poster frame from the movie.

For this example I have created a separate class that subclasses UIWebView:

@interface YouTubeView : UIWebView 
{
}
 
- (YouTubeView *)initWithStringAsURL:(NSString *)urlString frame:(CGRect)frame;
 
@end

Here’s the implementation of the class:

#import "YouTubeView.h"
 
@implementation YouTubeView
 
#pragma mark -
#pragma mark Initialization
 
- (YouTubeView *)initWithStringAsURL:(NSString *)urlString frame:(CGRect)frame;
{
  if (self = [super init]) 
  {
    // Create webview with requested frame size
    self = [[UIWebView alloc] initWithFrame:frame];
 
    // HTML to embed YouTube video
    NSString *youTubeVideoHTML = @"<html><head>\
                          <body style=\"margin:0\">\
                          <embed id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \
                          width=\"%0.0f\" height=\"%0.0f\"></embed>\
                          </body></html>";
 
    // Populate HTML with the URL and requested frame size
    NSString *html = [NSString stringWithFormat:youTubeVideoHTML, urlString, frame.size.width, frame.size.height];
 
    // Load the html into the webview
    [self loadHTMLString:html baseURL:nil];
  }
  return self;  
}
 
#pragma mark -
#pragma mark Cleanup
 
- (void)dealloc 
{
  [super dealloc];
}
 
@end

The magic here is the HTML for embedding the video content, and notice how the HTML is populated with the video URL and the desired frame size.

We can now insert this view inside a ViewController class as shown here:

 
  // Create view that will act as link to youtube video,
  // centering the view 
  YouTubeView *youTubeView = [[YouTubeView alloc] 
    initWithStringAsURL:@"http://www.youtube.com/watch?v=gczw0WRmHQU" 
    frame:CGRectMake(100, 170, 120, 120)];
 
  [[self view] addSubview:youTubeView];

Here is how the clickable link looks, the image on the left is before the poster frame has downloaded, the right includes the poster frame:

Tapping the link will start the movie in a webview.

Project Source Code

You can download the source code here: Display YouTube Video Inside an iPhone Application.

Note: As Joao mentions in a comment below, this code will not run on the simulator.

18 Comments

  1. I tried this on the iPhone and it worked perfectly, however this feature is not available on the simulator.

  2. I’m curious: how does this work given that the embed type is “application/x-shockwave-flash” and Apple famously does not allow Flash on the iPhone?

    • This code will fire up the native YouTube player on the iPhone (inside your app), which I imagine will map to a H.264 video versus flash. Anyone else know the specifics?

  3. Thank you very much for the article, it’s great !

    I have a problem, I always get a white frame when loading the youtube webview, do you know what could be wrong? I’m working with iOS 4.0

    Thanks

  4. This is the error I get..

    Tried to obtain the web lock from a thread other than the main thread or the web thread. This may be a result of calling to UIKit from a secondary thread. Crashing now…

  5. The quality of the video is bad on 3G network but great on wifi.The mobile youtube application has better video quality and its using quicktime player.

    Can I play the video using quicktime (just like the mobile youtube application) instead of using the native youtube app?

    • Praveen, I don’t know of a way to play a YouTUbe video other than the approach I mentioned in the post…anyone?

  6. I’ve read in a few places that the second method doesn’t work in the simulator.

    If I place a UiWebView in my app and give it a YouTube video URL, such that it displays the full page, when the video is clicked on, the desired functionality is achieved: the video is played in the YouTube app, and when the user clicks done, they are returned to my app.

    That works in the simulator.

    It’s the method of trying to get a “video-thumbnail” only that I can’t get to work, as in the screen shots above. Just to be clear, when I run the application in the simulator, I simply get a solid red UIWebView. If I refresh it, I then get the page that I supplied as the baseURL.

    Is that what others are experiencing when they say “it doesn’t work in the simulator”?

    Thanks, Gavin

  7. Sorry, I forgot to mention that the solid red is simply the background colour I set in the html :)

  8. Is there anyway of simulating a user click on a webview to start the youtube move? ie, we would like to start the movie without having to show the webview view, and still return to our application when the movie is done playing.

  9. This method works great on the iPhone and iPod, but I’m seeing all sorts of problems when running on an iPad in compatibility mode. The movie isn’t rotated landscape, the UI is cut off (because of that), and the original view isn’t restored at the end of play. Has anyone gotten this to work on an iPad running iOS 3.2.2 in compatibility mode? I’d really like a way for my app to play embedded YouTube videos on the iPad, but I’ll have to just do the exit-app openURL thing if I can’t resolve this soon. Thanks for any suggestions.

  10. Gavin, I just want to make sure that I understand. You’re saying that the method that works for you is to create a WebView with the URL of the YouTube video? That will only work in the Simulator. I just tried it on the iPad and it gives some pretty strange results. The video page loads fine, and if I tap the play button the video’s audio plays, but I don’t see any video. When I dismiss the controller with the webview in it, the sound keeps playing. If I just add the WebView as a subview of the current view, the same thing happens with the video playback.

    Loading a WebView with a YouTube URL works in the Simulator because the Simulator has Mac OS X support that the mobile devices don’t have. As far as I know, that approach only works in a Mac OS X application, which is all the Simulator is. Did you find a way to make it work on a device too? I’d be really surprised, since the whole thumbnail approach came out of WebViews on the iPhone, etc. not supporting such a direct approach to the problem as that.

    The “video thumbnail” approach doesn’t work in the Simulator because the Simulator doesn’t have the necessary YouTube plugin/mobile app support. That’s what people are referring to. The WebView for the thumbnail just appears empty and nonfunctional in the Simulator, but it works on the iPhone and iPod.

    However, I’ve yet to see the “video thumbnail” approach work on the iPad, at least one running iOS 3.2.2 in compatibility mode. I’d love to see/hear otherwise, though.

    – d

  11. Thank you very much John!

    I have tested this in an iPad device and works perfectly.

  12. I have a problem on iPad devices, in iPhone when user taps on the Youtube (In UIWebView) the video starts playing in the Player which is perfect , but when i run the same code on iPad it does not open the player instead the video plays in the webview itself. Anyone knows how to get around this ?

  13. Quick question.. Could this work with Justin.tv? Im working on an app and i was just wondering if this could work lets say that the user have the justin.tv app on my webview it would open the video on the justin.tv app.

  14. thank you very much , but this doesn’t work on iOS 6

Comments are closed.