Mar 03

Happy Square Root Day!

Playing a video (of a supported file format) on the iPhone is very easy using the MPMoviePlayerController class. You just create an instance of the class and initialize it with the URL of the video. The controller plays the video in full screen mode and returns back to your application when it’s done.

However, if the URL of the video is recognized by the iPhone as a YouTube URL then the Apple URL Scheme mechanism kicks in and launches the YouTube app. In this scenario control will not return to your app after the video has played. (The behavior is equivalent of calling [UIApplication openURL:] with the video URL.)

One workaround is to use a UIWebView and load it with the video URL. The drawback with this approach is that the user will see the rather ugly YouTube mobile web site and has to find and tap on the link of the video to play it.

YouTube Mobile

 

Another, visually more appealing, option is to create a small UIWebView on your screen and load it with the YouTube embed code. The result is a small button like image that shows the YouTube play button above a screen image from the video. When the user taps the image, the iPhone video player opens in full screen mode as usual, and when the video is done control is returned back to this screen.

YouTube Video Embedded in iPhone App

 

Here’s the code:

- (void)embedYouTube:(NSString*)url frame:(CGRect)frame {
 NSString* embedHTML = @"\
    <html><head>\
 <style type=\"text/css\">\
 body {\
 background-color: transparent;\
 color: white;\
 }\
 </style>\
 </head><body style=\"margin:0\">\
    <embed id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \
 width=\"%0.0f\" height=\"%0.0f\"></embed>\
    </body></html>";
 NSString* html = [NSString stringWithFormat:embedHTML, url, frame.size.width, frame.size.height];
 if(videoView == nil) {
 	videoView = [[UIWebView alloc] initWithFrame:frame];
 	[self.view addSubview:videoView];
 }
 [videoView loadHTMLString:html baseURL:nil];
}

Tip of the hat to joehewitt.

Update: A complete working Xcode project has been posted here.

written by Nick \\ tags:

94 Responses to “How To Play YouTube Videos Within an Application”

  1. Matze Says:

    @Nick: Thanks a lot for your advice. We want to sell our app in the iTS. Youtube’s terms of usage prohibit any commercial use of the youtube-channel. I am not sure, whether linking to a youtube video is commercial usage of youtubes contents.

  2. Matze Says:

    btw: Nice app WDYK!

  3. Curious Noob Says:

    So this is excellent…however i am a noob, would someone be able to copy the code again in a comment and put in brackets where certain info goes.

    I am trying to work on an iphone app and website but i’m extremely noob, and i dont know where i need to change information. Maybe even some one could make a really quick working example, so i can see where i can change things…
    Sorry for the noobery 🙂

  4. Nick Says:

    @Curious: You can download complete working code from this post.

  5. Curious Noob Says:

    if that wasn’t clear in the example of C#
    Console.WriteLine(“[Put text hear for output]”);

    I have trouble looking at that since i am noob and distinguishing reserved words from places i’m supposed to supply info (such as height, width, actual url)..

    Thanks guys!

  6. Paul Says:

    Hi all, Thanks for the great info above.

    Regarding a video end event: I’ve been successful using the UIWindowDidBecomeVisibleNotification notification to signal when the video has finished playing or when the user has indicated that they are done.

  7. Norio Says:

    Thank you very much!
    I can’t thank you enough. I could play video without modification!!!!!!!
    Norio

  8. Olivier Says:

    All was working OK until I uploaded my own youtube video. Now the youtube embedded player icon stays gray and is crossed.
    Any idea why?
    On a PC web browser, everything works fine, on the iPhone Youtube player everything is fine, but the problem arises in the webview.

    The video is: http://www.youtube.com/v/JVqyk0Pcg0c

  9. Alexander Says:

    As for starting play automatically –
    http://blog.lemonadestand.com.au/post/auto-playing-a-youtube-video-inside-webuiview-iphone-objective-c-sdk/23

  10. Nick Says:

    @Alexander: This is the same solution (and blog post) as pointed to in comment #61. While it may work for now, I still have the same reservations as earlier.

  11. felix001 Says:

    You may also find issues with playing youtube videos on Vodafone Iphones.
    You can find the fix here :
    http://www.fir3net.com/iPhone/iPhone/vodafone-iphone-youtubeerror-cannot-play-back-not-supported.html

    Great site by the way …. :o)

  12. kartik Says:

    hi i am not able to play youtube videos on my iphone. whenever i launch the youtube application it says it cannot connect to server. moreover i am not able to play even using safari. can anybody help me please 🙂

  13. Satya Says:

    Hi,

    I am trying to play youtube vedio in iphone with out using the webview. But it is not playing. It is giving a warning in the console like
    ” Warning: MPMoviePlayerController may not support file of type ”

    Please help me to avoid this problem.

  14. Nick Says:

    @Satya: The iPhone is very finicky about the video file formats it will play. If the file you want to play is not supported then, short of writing your own video player, there is not much you can do in code to change that. Try to find a video file that will play in Safari, then use that with your code to make sure your code is working. When you know your code is fine, and a particular video file still refuses to play, then you’ll have to re-enecode that video file to a format the iPhone does play.

  15. madhup Says:

    Hi, the above code works fine in the iPhone/iPod but when I use this code in iPad the video starts playing in the webview itself showing an option to maximize the screen. Now my question is, Can I start the playback in full screen from the beginning like it does for the iPhone and stop playback in the webview itself ?

  16. Danyal Says:

    my problem is still not resolve.I am just asking how to play YouTube video in I phone

  17. xsergiom Says:

    Video appears but not playing try this:
    htmlvideo is the uiwebview…

    [htmlVideo setUserInteractionEnabled:YES];

  18. neha Says:

    its not working in my project

  19. VanDat Says:

    Hey Nick,
    I did this, and the video does not seem to run. I got a blank view on iphone simulator.

  20. Nick Says:

    @VanDat: Videos do not play in the simulator. You have to test this on a device.

  21. Alex G Says:

    Hi. This code is great and it works for all of my YouTube videos apart from one. The link is good if I open in safari but in the app the play button is crossed out. There is no error. Any ideas?

    Thanks

  22. Yuichi Says:

    I think the way Youtube embed video has changed and they are using iframe instead of embed tag. So, embedHTML string will be more like this.

    NSString* embedHTML = @”\
    \
    \
    body {\
    background-color: transparent;\
    color: white;\
    }\
    \
    \
    \
    “;

    Great post anyways. Helped me a lot!

  23. Yuichi Says:

    It looks my code snippet got corrupted when posting. I will repost…

    NSString * embedHTML = @”body {background-color:blue;color:white;}”;

  24. Yuichi Says:

    One last try…

    NSString * embedHTML = @”<html><head><style type=’text/css’>body {background-color:blue;color:white;}</style></head><body style=’margin:0′><iframe width=’%f’ height=’%f’ src=’%@’ frameborder=’0′ allowfullscreen></iframe></body></html>”

  25. J.R. Says:

    Anyone had any luck getting the “Next” button to work for a playlist link using this technique? Works in Safari on my mac or on the YouTube app, but not in UIWebView as far as I’ve been able to determine. Plays the first video in the playlist only

  26. David Lee Says:

    Does anybody know how to make the function similar to iPhone Youtube App?

    For example, the youtube video will play automatically after clicking the navigation cell and click the “Done” button or the video finishes the playing and will go back to navigation cell

  27. verm Says:

    I got this working, which is great. but here is what I was looking for. When the user clicks on the play video, then I dont want it to go full screen, how can i get that going.

  28. RonN Says:

    My thumbnail button was showing a good size bar at the top. the src url needs this change.

    src="http://www.youtube.com/embed/%@?controls=0&showinfo=0"

  29. Gustavo Says:

    HI!

    What is this data? videoView?
    I put the code in my project and when I tried to run, Xcode tell me that “Use undeclared of identifier ‘videoView’ “

Leave a Reply