971-270-0003 info@singlecoilinc.com

Adding a youtube video to an iOS app in 5 easy steps.

Adding a youtube video to an iPhone or iPad should be easy–and it is!  The most difficult part in finding how to do this is sorting through the search results to find what is the current recommended approach and what has been deprecated.  Searching for “embed youtube in iOS app” may lead you to this page which starts with a warning that the information is out-of-date but also points you to this page which contains the information you want but is a bit TL; DR. Here’s the simple solution for iOS 6 & 7:

1. Add an HTML file to your iOS project, making sure it is also added to the desired target. Here is the HTML (in the iFrame link, be sure to replace YOUR_VIDEO_ID with your video ID from youtube.):

<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 0 0 0 0;
background-color: #000;
}

iframe{
position:absolute;
height: 100%;
width: 100%;
background-color: #000;
}
</style>
</head>
<body>
<iframe id="player" type="text/html"   
src="http://www.youtube.com/embed/YOUR_VIDEO_ID?enablejsapi=1&fs=1&playsinline=0&rel=0&autoplay=1&origin=http://www.example.com"
frameborder="0"></iframe>

<script>
// 1. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 2. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
//http://youtu.be/rzl9v_u43g4
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player');
}

</script>
</body>
</html>

2. Drag a UIWebView to your storyboard. For iPad, you can make the UIWebView the size you want the video to be. For iPhone/iPod, the video will play full screen automatically, so the UIWebView will only need to be as big as the clickable area you want to start the video.

3. In your view controller, add a property for the web view.

@property (weak, atomic) IBOutlet UIWebView* videoView;

4. In the storyboard, link the UIWebView to the property.

5. In the view controller’s .m file, load your local HTML into the web view:

-(void)viewDidAppear:(BOOL)animated
{
    [self.videoView loadRequest:[NSURLRequest 
                                requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle]         
                                                                        pathForResource:@"YOUR_LOCAL_HTML_FILE_NAME" 
                                                                        ofType:@"html"]
                                                      isDirectory:NO]]];
}

That should do it.

Bonus section: To make the experience better, there are things that can be done in the app as well as through youtube’s API.

1. Detect when the video finishes. When a video is done playing, a notification is broadcasted.  If you listen for it, you’ll know what to do.  Add the following to the view controller’s .m file:

//in the viewDidLoad event
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(playerWillExitFullscreen:)
                                                 name:@"UIMoviePlayerControllerWillExitFullscreenNotification"
                                               object:nil];
...
//add this to respond to the notification:
- (void)playerWillExitFullscreen:(NSNotification *)notification
{
    //code to run when video is done.
}

2. Add parameters to youtube’s player. The interface youtube uses to play the video is the HTML5 player. There are many parameters you can use to customize controls, when the video starts, when it ends, how long it plays, etc. These parameters can be found here. They can be added to the src tag in the iFrame of your local HTML file (they are & separated.) 3. Use youtube’s javascript API to detect other events. The HTML supplied above automatically download’s youtube’s javascript library for detecting events.  This link shows how to listen for them.

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>