Embed video from youtube.com into iphone app

6
votes

i'm trying to embed youtube video into my iphone application. I'm using UIWebView and loading embed code from youtube as html string. So i have a layout with basic html markup and i'm placing there this code.

<embed id="yt" src="http://www.youtube.com/watch?v=L9szn1QQfas&fs=0" type="application/x-shockwave-flash" width="%width%" height="%height%"></embed>

The problem is the video always opens in the fullscreen mode. I've changed my webview property allowsInlineMediaPlayback to YES _webview.allowsInlineMediaPlayback = YES; but it doesn't works too. Is there a way to play videos from youtube without fullscreen?

I'm also tried to embed like this

<iframe title="YouTube video player" id="videoframe" width="%width%" height="%height%" src="http://www.youtube.com/embed/L9szn1QQfas?rel=0" frameborder="0"></iframe>

and this

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/L9szn1QQfas" width="%width%" height="%height%">
<param name="movie" value="http://www.youtube.com/v/L9szn1QQfas" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="false" />
<embed id="yt" src="http://www.youtube.com/v/L9szn1QQfas" type="application/x-shockwave-flash" width="%width%" height="%height%"></embed>
</object>

Thanks.

6
iphoneyoutube

6 Answers

10
votes

As far as I'm aware, inline media playback is only supported on iPad, not iPhone. This would be due to size limitations with the screens.

Edit:

I setup a test project, with a UIWebView and the code:

[webView setAllowsInlineMediaPlayback:YES];
[webView loadHTMLString:@"<embed id=\"yt\" src=\"http://www.youtube.com/watch?v=L9szn1QQfas&fs=0\" type=\"application/x-shockwave-flash\" width=\"300\" height=\"300\"></embed>"
                    baseURL:nil];

I ran the same exact code on both an iPhone and an iPad, both running iOS 4.2.1.

The results were that the iPhone would only play the video in fullscreen mode, regardless of setting the inline media playback to YES and the iPad played the video inline. Here's a picture:

enter image description here

10
votes

There is one undocumented parameter "playsinline" now. I've tested it on iPhone 4S (iOS 6.1.2).

player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'u1zgFlCw8Aw',
    playerVars: {
        'playsinline': 1
    }
});

And you should set the webview as well.

[webView setAllowsInlineMediaPlayback:YES];
7
votes

For iOS 5 or new apps use official syntax, see the link below it works very fine

http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html

5
votes

If anyone is still facing this problem, below is by far the best solution I have seen. Works like a charm

        self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(10, 10,300, 200)];
        [self.webView setAllowsInlineMediaPlayback:YES];
        [self.webView setMediaPlaybackRequiresUserAction:NO];

        [self.view addSubview:self.webView];

        NSString* embedHTML = [NSString stringWithFormat:@"\
                               <html>\
                                    <body style='margin:0px;padding:0px;'>\
                                        <script type='text/javascript' src='http://www.youtube.com/iframe_api'></script>\
                                        <script type='text/javascript'>\
                                            function onYouTubeIframeAPIReady()\
                                            {\
                                                ytplayer=new YT.Player('playerId',{events:{onReady:onPlayerReady}})\
                                            }\
                                            function onPlayerReady(a)\
                                            { \
                                                a.target.playVideo(); \
                                            }\
                                        </script>\
                                        <iframe id='playerId' type='text/html' width='%d' height='%d' src='http://www.youtube.com/embed/%@?enablejsapi=1&rel=0&playsinline=1&autoplay=1' frameborder='0'>\
                                    </body>\
                               </html>", 300, 200, @"JW5meKfy3fY"];
        [self.webView loadHTMLString:embedHTML baseURL:[[NSBundle mainBundle] resourceURL]];

Source: https://code.google.com/p/gdata-issues/issues/detail?id=5204

4
votes

Play youtube videos inline on iPhone as well. You need to set property on UIWebView

webView.allowsInlineMediaPlayaback=YES;

And you need to add &playsinline=1 to YouTube iframe embedding code.

<iframe webkit-playsinline width=\"200\" height=\"200\" src=\"https://www.youtube.com/embed/GOiIxqcbzyM?feature=player_detailpage&playsinline=1\" frameborder=\"0\"></iframe>

Tested on iPhone 4S running iOS 6.1.2 works like a charm.

0
votes

If you are developing your app for ios version 7 or above then you can use YTPlayerView class available at Embed YouTube Videos in iOS Applications with the YouTube Helper Library. It is very easy to use and also provide full control on video player by using its delegate YTPlayerViewDelegate. Hope this can help anyone.