Skip to content
Open YouTube video in app or use the browser as fallback for Android & iOS. Plugin goal is to show YouTube video via native app or mobile website to count for views.
Branch: master
Clone or download
davidefavia Fixed package.json (#2)
* Initial platforms commit

* Updated README, similar behaviors for Android & iOS
* Updated README with arguments type for callbacks
* Fixed trailing comma inside package.json, added LICENSE file
Latest commit 3a8a247 Jun 5, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Plugin implementation (#1) Apr 4, 2017
www Plugin implementation (#1) Apr 4, 2017
CHANGELOG.md Fixed package.json (#2) Jun 5, 2017
LICENSE Fixed package.json (#2) Jun 5, 2017
README.md Fixed package.json (#2) Jun 5, 2017
package.json
plugin.xml Plugin implementation (#1) Apr 4, 2017

README.md

cordova-plugin-in-app-youtube

Open YouTube video in app or use the browser as fallback for Android & iOS. Plugin goal is to show YouTube video via native app or mobile website to count for views.

If you need to stream YouTube video content without using its own player, just check Glitchbone/CordovaYoutubeVideoPlayer project.

Getting Started

This plugin has been tested with Cordova 6.5.0, Android 7.1.1 and iOS 10.3.

Install via Cordova:

$ cordova plugin add https://github.com/davidefavia/cordova-plugin-in-app-youtube

Reference

window.InAppYouTube.openVideo(videoId, [options, successCallback, errorCallback])

It opens a YouTube video.

Parameters

Parameter Type Default Description
videoId string YouTube video identifier, e.g. 9bZkp7q19f0.
options object {} Use fullscreen = true to enable fullscreen.
successCallback function function() {} Plugin returns result object with videoId (string), options (object) and type (string) key. type can be application or webview depending on which application opened the video.
errorCallback function function() {} Plugin returns error or exception message (string).

Platforms have different behaviors.

Platform YouTube app installed fullscreen option Behavior
Android Yes true YouTube app plays video in landscape mode (even if your app forbids this orientation) in fullscreen inside your app. Back button lets Cordova WebView take focus back.
Android Yes false YouTube app plays video in portrait mode inside your app. Some related content is shown below the video player. Back button lets the Cordova WebView take focus back.
Android No true URL https://www.youtube.com/embed/<video-id> is opened in the default browser in full window size, browser toolbar is visible. Video is stopped by default due to Chrome for Android policies.
Android No false URL https://www.youtube.com/watch?v=<video-id> is opened in the default browser, browser toolbar is visible. Video is stopped by default due to Chrome for Android policies.
iOS Yes true YouTube app plays video in portrait mode outside your app. Some related content is shown below the video player. Back button in top corner lets the Cordova WebView take focus back.
iOS Yes false YouTube app plays video in portrait mode outside your app. Some related content is shown below the video player. Back button in top corner lets the Cordova WebView take focus back.
iOS No true URL https://www.youtube.com/embed/<video-id> is opened in the Safari in full window size, toolbar is visible. Video is stopped by default due to Apple policies.
iOS No false URL https://www.youtube.com/watch?v=<video-id> is opened in the default browser, browser toolbar is visible. Video is stopped by default due to Apple policies.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Device Ready Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    function onLoad() {
      document.addEventListener("deviceready", onDeviceReady, false);
    }

    // device APIs are available
    function onDeviceReady() {
      // Now safe to use device APIs
      try {
        window.InAppYouTube.openVideo('9bZkp7q19f0', {
          fullscreen: true
        }, function(result) {
          // console.log(JSON.stringify(result));
        }, function(reason) {
          // console.log(reason);
        });
      } catch(e) {
        // Exception!
      }
    }

    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>

License

This project is licensed under the MIT License - see the LICENSE file for details.

You can’t perform that action at this time.