Render video inline in iOS webview using YouTube's iFrame player?

Question

I'm trying to use the YouTube iFrame player within a webview in an iOS app, but the player insists on using the iOS player to render the video fullscreen. I want to play the video within the webview. Is there some value I can pass to the player to convince it that it's in a web view and not mobile Safari and it's OK to just render the video within the iframe?

I'm using the YouTube iFrame player, not the HTML video element. So I presumably need a way to get YouTube's player to use webkit-playsinline. — Seanonymous

JAL JAL · Accepted Answer · 2015-06-24T18:42:36

Here's an example in Swift of how to play a YouTube video in-line without forcing the user into the full screen player:

let webView = UIWebView(frame: CGRectMake(0, 30, self.view.frame.size.width, 500)) // or your custom rect, this is just an example

self.view.addSubview(webView)
self.view.bringSubviewToFront(webView)

// Play video in-line and start playback immediately
webView.allowsInlineMediaPlayback = true
webView.mediaPlaybackRequiresUserAction = false

// Set the id of the video you want to play
let videoID = "zN-GGeNPQEg" // https://www.youtube.com/watch?v=zN-GGeNPQEg

// Set up your player
let embededHTML = "<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='\(self.view.frame.size.width)' height='\(self.view.frame.size.height)' src='http://www.youtube.com/embed/\(videoID)?enablejsapi=1&rel=0&playsinline=1&autoplay=1' frameborder='0'></body></html>"

// Load the player
webView.loadHTMLString(embededHTML, baseURL: NSBundle.mainBundle().bundleURL)

Render video inline in iOS webview using YouTube's iFrame player?

1 Answers