How to autoplay a YouTube video in a UIWebView How to autoplay a YouTube video in a UIWebView ios ios

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


matomo