6

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.

Fabian N.
  • 3,807
  • 2
  • 23
  • 46
Nikolay Osaulenko
  • 1,462
  • 1
  • 12
  • 21

6 Answers6

10

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];
iForests
  • 6,757
  • 10
  • 42
  • 75
  • Seems to be officially documented by Google from what I've seen. This answer will solve the original question. – Marc Charbonneau Mar 21 '13 at 23:36
  • @MarcCharbonneau It is only "documented" [here](https://code.google.com/p/gdata-issues/issues/detail?id=3007#c2) by one project member of gdata. – iForests Mar 22 '13 at 03:53
10

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

Jasarien
  • 58,279
  • 31
  • 157
  • 188
  • Thanks for your answer. I've thought about it, but i'm not found such information in the official documentation. There is only one note about the parameter allowsInlineMediaPlayback which is set to NO by default in the iphone. – Nikolay Osaulenko Feb 28 '11 at 16:35
  • 2
    Yes, you're right - which is why I could be wrong. I do, however, remember it being said when the iPad was launched that inline playback would only be supported on iPad... that may have changed with the release of the iPhone 4, the retina display and iOS 4. I'll whip up a test project to see. – Jasarien Feb 28 '11 at 16:41
  • That would be great. Thanks. I've tested my application on the iphone 4 with no success. Video plays in the fullscreen mode after tap. – Nikolay Osaulenko Feb 28 '11 at 16:46
  • I get the same, plays fullscreen on iPhone even with the inline playback set to YES. My iPad is just charging now, I'll test on that ASAP. – Jasarien Feb 28 '11 at 16:49
  • 1
    Thank you. I just tried to add `webkit-playsinline` attribute to video tag. `` `function addInline() { var video = document.getElementById('videoframe').contentDocument.getElementsByTagName('video'); video.setAttribute('webkit-playsinline', ''); }` But it still plays fullsreen. – Nikolay Osaulenko Feb 28 '11 at 16:56
  • @icewind I've edited my answer with the results of my test project. I'm afraid that inline playback only works on an iPad. – Jasarien Feb 28 '11 at 17:10
  • Thanks for your help. Although news and not very good, but now I know what the reason – Nikolay Osaulenko Feb 28 '11 at 17:16
  • 2
    YouTube doesn't give you access to their ` – rpetrich Apr 18 '11 at 11:17
  • 2
    Youtube updated their embedded tag to support the webkit-playsinline attribute recently, see iForests' answer. – Marc Charbonneau Mar 21 '13 at 23:34
7

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

Shahid Aslam
  • 2,585
  • 3
  • 24
  • 31
5

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

tasomaniac
  • 10,234
  • 6
  • 52
  • 84
Kesava
  • 1,049
  • 14
  • 22
  • This should be marked as accepted response. Tested IOS7. The only thing I would suggest is to create the webview in the story board and set the properties setAllowsInlineMediaPlayback = YES and setMediaPlaybackRequiresUserAction = NO in the attributes inspector. – Ives.me Jun 01 '14 at 01:37
  • can you guide me if i am adding url from an array, how i can achieve this? – Kundan Feb 05 '15 at 19:32
4

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.

stringCode
  • 2,274
  • 1
  • 23
  • 32
0

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.

iHulk
  • 4,869
  • 2
  • 30
  • 39