Engineering and Developers Blog
What's happening with engineering and developers at YouTube
YouTube APIs + iPhone = Cool mobile apps
Thursday, February 5, 2009
Update (Nov. 2013)
: The information in this blog post is out of date; the current best practice for embedding YouTube videos in an iOS application is to use the
YouTube iframe Player
within a
UIWebView container
.
Posted by Kuan Yong, YouTube APIs and Tools Team
The YouTube APIs
Terms of Service
permits commercial use of the APIs
under certain conditions
, and in most cases, as long as you play fair, you are free (and highly encouraged) to develop great iPhone apps using the YouTube APIs and sell them in the iTunes App Store.
An iPhone app that uses the YouTube APIs typically needs to do two things:
Call the YouTube API Data API to search videos, get video metadata, etc. You should use our
Objective C client library
instead of trying to construct the HTTP request or parse the response by hand.
Invoke the native YouTube player on the iPhone to play videos.
There are at least two ways to play YouTube videos in your iPhone app (that don't run afoul of Apple's SDK rules). The easier way requires just one line of code but it involves quitting your app and launching the full YouTube app on the phone. The better way needs a little more setup but provides a seamless way of taking the user to the YouTube player and back to your app.
Note that these two methods work only on an actual device, not in the iPhone simulator, since the latter does not have a YouTube player.
Method 1: Open the YouTube play page URL (Easier)
1. Grab the video url from the
media tag in the API response with the
application/x-shockwave-flash
type. It should look something like this:
http://www.youtube.com/v/
oHg5SJYRHA0&f=gdata_videos&c=
ytapi-my-clientID&d=
nGF83uyVrg8eD4rfEkk22mDOl3qUIm
VMV6ramM
If you don't see the
c
and
d
parameters in the URL, it's because you are not passing in your developer key and client ID in the request. While they are not mandatory for read requests, we highly recommend that you provide them in
every
API request.
2. Open the URL in your app by calling the openURL method on your UIApplication instance:
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"
http://www.
youtube.com/v/oHg5SJYRHA0&f=
gdata_videos&c=ytapi-my-
clientID&d=
nGF83uyVrg8eD4rfEkk22mDOl3qUIm
VMV6ramM
"]];
When your app calls openURL, it will quit and launch the full native YouTube app on the phone. After the video stops playing, the user remains in the YouTube app. The user has no easy way of getting back to your app.
Method 2: Embed the YouTube player in a UIWebView
No, the iPhone still doesn't do Flash, but if you haven't already noticed, the Safari browser on the iPhone is clever enough to turn any YouTube embed into a clickable thumbnail that launches the native YouTube player app on the phone. You can take advantage of this feature in your app by using a UIWebView. Here's how:
1. Set up a UIWebView in your app. You can make it part of a xib or create it programmatically. Size the UIWebView according to how large you want the clickable thumbnail to be.
2. Grab the video url using the same method as the one described above.
3. Call the
loadHTMLString:baseURL:
method on the UIWebView instance with some carefully constructed HTML that contains the YouTube embedded player code snippet and some supporting HTML to make sure that the video thumbnail appears correctly. Set the base URL to the URL of your website (it doesn't do anything here -- ordinarily UIWebView uses it to handle relative URL links correctly).
The best way to illustrate this is with a code snippet. Note the use of the
viewport
HTML meta parameter and the consistent use of
width
and
height
parameters throughout.
// webView is a UIWebView, either initialized programmatically or loaded as part of a xib.
NSString *htmlString = @"<html><head>
<meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = no, width = 212\"/></head>
<body style=\"background:#F00;margin-top:0px;margin-left:0px\">
<div><object width=\"212\" height=\"172\">
<param name=\"movie\" value=\"http://www.youtube.com/v/oHg5SJYRHA0&f=gdata_videos&c=ytapi-my-clientID&d=nGF83uyVrg8eD4rfEkk22mDOl3qUImVMV6ramM\"></param>
<param name=\"wmode\" value=\"transparent\"></param>
<embed src=\"http://www.youtube.com/v/oHg5SJYRHA0&f=gdata_videos&c=ytapi-my-clientID&d=nGF83uyVrg8eD4rfEkk22mDOl3qUImVMV6ramM\"
type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"212\" height=\"172\"></embed>
</object></div></body></html>";
[webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:@"http://www.your-url.com"]];
One of the biggest benefits of this approach is that your app does not have to quit in order for the video to start playing. In fact, the iPhone will keep your app running in the background while it fires up the YouTube player to play the video. After the video finishes playing (or when the user hits "Done"), the user is automatically taken back to your app. This experience is very similar to watching embedded YouTube videos in the iPhone Safari browser and is just as seamless.
Have fun writing the next killer iPhone app, and don't forget to list your app in the
YouTube Project Gallery
once it goes live in the App Store!
Coming up: Adding YouTube content to Android apps
Labels
.net
360
acceleration
access control
accessibility
actionscript
activities
activity
android
announcements
apis
app engine
appengine
apps script
as2
as3
atom
authentication
authorization
authsub
best practices
blackops
blur faces
bootcamp
captions
categories
channels
charts
chrome
chromeless
client library
clientlibraries
clientlogin
code
color
comments
compositing
create
curation
custom player
decommission
default
deprecation
devs
direct
discovery
docs
Documentation RSS
dotnet
education
embed
embedding
events
extension
feeds
flash
format
friendactivity
friends
fun
gears
google developers live
google group
googlegamedev
googleio
html5
https
iframe
insight
io12
io2011
ios
iphone
irc
issue tracker
java
javascript
json
json-c
jsonc
knight
legacy
Live Streaming API
LiveBroadcasts API
logo
machine learning
mashups
media:keywords keywords tags metadata
metadata
mobile
mozilla
NAB 2016
news
oauth
oauth2
office hours
open source
partial
partial response
partial update
partners
patch
php
player
playlists
policy
previews
pubsubhubbub
push
python
quota
rails
releases
rendering
reports
responses
resumable
ruby
samples
sandbox
shortform
ssl https certificate staging stage
stack overflow
stage video
staging
standard feeds
storify
storyful
subscription
sup
Super Chat API
survey
tdd
theme
tos
tutorials
updates
uploads
v2
v3
video
video files
video transcoding
virtual reality
voting
VR
watch history
watchlater
webvtt
youtube
youtube api
YouTube Data API
youtube developers live
youtube direct
YouTube IFrame Player API
YouTube live
YouTube Reporting API
ytd
Archive
2019
Aug
Apr
2018
Dec
Aug
Apr
2017
Nov
Sep
Aug
Mar
Jan
2016
Nov
Oct
Aug
May
Apr
2015
Dec
Nov
Oct
May
Apr
Mar
Jan
2014
Oct
Sep
Aug
May
Mar
2013
Dec
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
2012
Dec
Nov
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
2007
Dec
Nov
Aug
Jun
May
Feed
Follow @youtubedev