InAppBrowser does not play Youtube videos on full screen mode in ionic

Question

I am developing an Android app using Cordova and Ionic framework. I am playing a YouTube video with InAppBrowser using the code below:

window.open(\'https://         


        

Answer 1

I know that the answer is kind of "old" but as I run into this and the answer doesn't really fix the underlying problem:

The real answer to this is that this is a limitation of the Cordova plugin as it 'just' uses 'WebView'. This basically means this "issue" boils down to this question as indicated in the answer the "fixed" code is maintained on GitHub.

To get back to Cordova, what you can do is clone the inappbrowser-plugin and change it in a way to use the VideoEnabledWebView, for example with this patch. Alternatively you can clone my fork. I'd recommend to add this as git-subtree somewhere to your repository

Now run cordova plugin remove cordova-plugin-inappbrowser && cordova plugin add ./src/plugins/cordova-plugin-inappbrowser/ (or whatever path you used). With subtree you can easily contribute changes back to the original plugin (which I sadly did not do yet, if you read this please do!) or pull changes/fixes from the original plugin.

Disclaimer: My use-case was "playing around" with Cordova, so if you have other requirements I'd recommend testing this setup carefully and contributing back to the original plugin to get feedback.

Answer 2

Use embed URL and this should work.

window.open('https://www.youtube.com/embed/v8WjMiodcKo');

2. EDIT

Second option is to use '_system', as in example

window.open('https://www.youtube.com/watch?v=v8WjMiodcKo', '_system');

3. EDIT

3.1. Download this npm package $ npm install --save angular-youtube-embed.

3.2. Copy angular-youtube-embed.js from \node_modules\angular-youtube-embed\src\angular-youtube-embed.js to www\js

3.3. Add 'youtube-embed' dependency in app.js

3.4. Add this to index.html

<script src="https://www.youtube.com/iframe_api"></script>
<script src="js/angular-youtube-embed.js"></script>

3.5. Create a controller

.controller('YoutubeCtrl', function($scope) {
       $scope.BestFriends = 'v8WjMiodcKo';
}) 

3.6. Add this to html page

<youtube-video video-id="BestFriends" player-width="'100%'" player-height="'300px'"></youtube-video>