InlineYoutubeView

ios-inline-youtube-view

YouTube component for Android, iOS and React. This is a suite of utility libraries around using YouTube inside your Android, iOS or React Native app.

youtube-ios

This pod is a modification of the youtube-ios-helper provided by youtube. Modifications include

Migration to WkWebView from the older UIWebView. WKWebView is run in a separate process to your app so that it can draw on native Safari JavaScript optimizations. This means WKWebView loads web pages faster and more efficiently than UIWebView, and also doesn’t have as much memory overhead for you. Quoting the Apple documentation – "Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView."

Adding support for custom html urls. Earlier we could only use the html in the resource bundle

Adding parameter for deciding whether to play the videos inline or fullscreen.

Adding error callback for when network is offline after iframeAPI has been loaded.

Demo App

To run the example project, clone the repo, and run pod install from the Example directory first.

Demo Gifs

Installation

inlineYouTubeView is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'InlineYoutubeView'

Usage

Import the header file

ObjectiveC

#import <InlineYoutubeView/InlineYoutubeView.h>

Swift

import InlineYoutubeView

Create an object of the InlineYoutubeView.

ObjectiveC

@property (nonatomic, strong) InlineYoutubeView *youtubeView;

Swift

var youtubeView: InlineYoutubeView

Initialise the Inline youtube view.

ObjectiveC

//The url where the HTML is hosted. You can have any custom HTML url as well. So you can modify the iframe provided, upload the modified HTML file and use the url here
NSString *const HTML_URL = @"https://cdn.rawgit.com/flipkart-incubator/inline-youtube-view/60bae1a1/youtube-android/youtube_iframe_player.html";
//Incase you need your youtube view to open inline
self.youtubeView = [[InlineYoutubeView alloc] initWithHtmlUrl:HTML_URL andVideoPlayerMode:kYTPlayerModeInline];
//Incase you need your youtube view to open in fullscreen
self.youtubeView = [[InlineYoutubeView alloc] initWithHtmlUrl:HTML_URL andVideoPlayerMode:kYTPlayerModeFullScreen];

Swift

//The url where the HTML is hosted. You can have any custom HTML url as well. So you can modify the iframe provided, upload the modified HTML file and use the url here
let HTML_URL = "https://cdn.rawgit.com/flipkart-incubator/inline-youtube-view/60bae1a1/youtube-android/youtube_iframe_player.html"
//Incase you need your youtube view to open inline
youtubeView = InlineYoutubeView(htmlUrl: HTML_URL, andVideoPlayerMode: .inline)
//Incase you need your youtube view to open in fullscreen
youtubeView = InlineYoutubeView(htmlUrl: HTML_URL, andVideoPlayerMode: .fullScreen)

Set the delegate of the youtube view to self. This will ensure that you start receiving all the InlineYoutubeView callbacks.

ObjectiveC

self.youtubeView.delegate = self;

Swift

youtubeView.delegate = self

Load the iframe. If it is not loaded right now, the InlineYoutubeView will give a playerViewDidBecomeReady callback when it loads up. If it is loaded we will simply call the method right now to start up the video.

ObjectiveC

//Wait for youtube player to to get ready or proceed if it is ready.
if([self.youtubeView loadYTIframe]) {
[self playerViewDidBecomeReady:self.youtubeView];
}

Swift

//Wait for youtube player to to get ready or proceed if it is ready.
if (ytPlayerView.loadYTIframe()) {
playerViewDidBecomeReady(ytPlayerView)
}

Implement the playerViewDidBecomeReady method of the InlineYoutubeViewDelegate. This method should be called when your player becomes ready.

//Wait for youtube player to to get ready or proceed if it is ready.
func playerViewDidBecomeReady(_ playerView: InlineYoutubeView) {
//Load the youtube video with the videoId of the video
playerView.loadVideo(byId: videoId, startSeconds: 0, suggestedQuality: YTPlaybackQuality.auto)
playerView.playVideo()
}

You can implement other methods of the InlineYoutubeViewDelegate depending on your requirements. Check out the InlineYoutubeView.h file for more documentation on the same.

Contributing

Author

License

InlineYoutubeView is available under the Apache 2.0 license. The pod files are a modification of the work done by Google and has their license. However the Example project belongs to the Flipkart license. See the LICENSE file for more info.