How to autoplay a YouTube video in a UIWebView
Apparently the problem was with the nil base url, when I changed it to resourceURL the autoplay worked.
[self loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]]; The full code for autoplay youtube videos (again this code mostly based on this post I just changed it to load from a string instead of a file):
static NSString *youTubeVideoHTML = @"<!DOCTYPE html><html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script> var tag = document.createElement('script'); tag.src = \"http://www.youtube.com/player_api\"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { width:'%0.0f', height:'%0.0f', videoId:'%@', events: { 'onReady': onPlayerReady, } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>"; - (void)playVideoWithId:(NSString *)videoId { NSString *html = [NSString stringWithFormat:youTubeVideoHTML, self.frame.size.width, self.frame.size.height, videoId]; [self loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]];}
The key here is to set playsinline=1 in your iFrame player, and allowsInlineMediaPlayback = true and mediaPlaybackRequiresUserAction = false for your UIWebView. Here's my implementation in Swift:
// Set up your UIWebViewlet webView = UIWebView(frame: self.view.frame) // or pass in your own custom frame rectself.view.addSubview(webView)self.view.bringSubviewToFront(webView)// Set propertieswebView.allowsInlineMediaPlayback = truewebView.mediaPlaybackRequiresUserAction = false// get the ID of the video you want to playlet videoID = "zN-GGeNPQEg" // https://www.youtube.com/watch?v=zN-GGeNPQEg// Set up your HTML. The key URL parameters here are playsinline=1 and autoplay=1// Replace the height and width of the player here to match your UIWebView's frame rectlet 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 your webView with the HTML we just set upwebView.loadHTMLString(embededHTML, baseURL: NSBundle.mainBundle().bundleURL)
Here is full solution:
//// S6ViewController.m// //// Created by Ökkeş Emin BALÇİÇEK on 11/30/13.// Copyright (c) 2013 Ökkeş Emin BALÇİÇEK. All rights reserved.//#import "S6ViewController.h"@interface S6ViewController ()@end@implementation S6ViewController- (void)viewDidLoad{ [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self playVideoWithId:@"sLVGweQU7rQ"];}- (void)playVideoWithId:(NSString *)videoId { NSString *youTubeVideoHTML = @"<html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script> var tag = document.createElement('script'); tag.src = 'http://www.youtube.com/player_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { width:'768', height:'1024', videoId:'sLVGweQU7rQ', events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>"; NSString *html = [NSString stringWithFormat:youTubeVideoHTML, videoId]; UIWebView *videoView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 768, 1024)]; videoView.backgroundColor = [UIColor clearColor]; videoView.opaque = NO; //videoView.delegate = self; [self.view addSubview:videoView]; videoView.mediaPlaybackRequiresUserAction = NO; [videoView loadHTMLString:youTubeVideoHTML baseURL:[[NSBundle mainBundle] resourceURL]];}@end