Display YouTube Videos Without Exiting Your Application

Wed, May 19

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

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

by Joao Henrique on May 19, 2010. #

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?

by James Richards on May 19, 2010. #

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?

by John Muchow on May 19, 2010. #

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

by Esteban on Jun 24, 2010. #

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…

by Esteban on Jun 24, 2010. #

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?

by Praveen on Aug 3, 2010. #

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

by John Muchow on Aug 4, 2010. #

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

by Gavin on Aug 12, 2010. #

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

by Gavin on Aug 12, 2010. #

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.

by redsolo on Sep 24, 2010. #

Any luck ??

by Waleed on Nov 23, 2012. #

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.

by Dave on Oct 7, 2010. #

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

by Dave on Oct 7, 2010. #

Thank you very much John!

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

by Ivan Saroka on Jan 15, 2011. #

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 ?

by Naveen on Jan 20, 2011. #

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.

by Frank on Feb 9, 2011. #

You may be able to get something to work via a custom URL, check out this post: Launching Your Own Application via a Custom URL Scheme

by John Muchow on Feb 10, 2011. #

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

by waleed qaffaf on Nov 24, 2012. #