Can I play a youtube video in a UIWebView inline (not fullscreen)?

16
votes

I have looked everywhere on how to do this and haven't found an answer yet. Is it possible to play a youtube video in a UIWebView on an iPhone inline, i.e. not fullscreen? I know that the iPhone doesn't support flash, but youtube supports html5 and has h.264 videos doesn't it? shouldn't I be able to do this then?

I have set allowsInlineMediaPlayback to YES, but still it plays fullscreen.

3
uiwebviewyoutubeinline
try this one iphoneincubator.com/blog/audio-video/… – Vijay-Apple-Dev.blogspot.com
u have to change frame size properties to achieve small – Vijay-Apple-Dev.blogspot.com
Thanks, but this example will play in fullscreen, not inline (tried it). The UIWebView's frame is already smaller than the whole screen, so the frame is not the issue here. – Fastas

3 Answers

34
votes

Yes you can, you need to set property on UIWebView

 webView.allowsInlineMediaPlayback=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.

3
votes

allowsInlineMediaPlayback UIWebView properties

Boolean value that determines whether HTML5 videos play inline or use the native full-screen controller. (developer.apple.com)

You can use this feature on iPad. On the iPhone there is no such function. If you try play video with uiwebview on iPhone it will be played in full screen mode.

0
votes

Yes, you can play any embed video inline UIWebView itself with help of "playsinline=1".

Source code like:

    NSMutableString *html = [[NSMutableString alloc] initWithCapacity:1] ;
[html appendString:@"<html><head>"];
[html appendString:@"<style type=\"text/css\">"];
[html appendString:@"body {"];
[html appendString:@"background-color: transparent;"];
[html appendString:@"color: white;"];
[html appendString:@"}"];
[html appendString:@"</style>"];
[html appendString:@"</head><body style=\"margin:0\">"];
[html appendString:@"<iframe webkit-playsinline width=\"300\" height=\"220\" src=\"http://www.ustream.tv/embed/23192315?html5ui&showtitle=false&playsinline=1\" frameborder=\"0\"></iframe>"];
[html appendString:@"</body></html>"];
[self.webViewRef loadHTMLString:html baseURL:nil];