3

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://www.youtube.com/watch?v=v8WjMiodcKo');

But the issue is it opens inappbrowser but doesn't have full screen mode option to watch videos. Is there anyway to do this?

user1188867
  • 3,726
  • 5
  • 43
  • 69

2 Answers2

2

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.

matthid
  • 1,644
  • 16
  • 26
  • 1
    For anyone looking for the updated version of cordova-plugin-inappbrowser forked by @matthid, I have created a new fork from the cordova-plugin-inappbrowser and modified the code to make the full screen work (just like @matthid). https://github.com/The-White-Fang/cordova-plugin-inappbrowser – TheWhiteFang Jul 19 '21 at 12:31
1

Use embed URL and this should work.

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

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

window.open('https://www.youtube.com/watch?v=v8WjMiodcKo', '_system');
  1. 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>
Tomislav Stankovic
  • 3,080
  • 17
  • 35
  • 42
  • I don't want to use embed as it does not play certain copyright videos of youtube. – user1188867 Jun 16 '16 at 06:56
  • The updated answer opens systems youtube app. I want my application has some kind of video player which can play youtube urls without going outside of the app. Since inappbrowser plays videos within app and user can close it to get back to my app i thought there might be some way of dealing with full screen issue. Anyway Thanks for your efforts. – user1188867 Jun 17 '16 at 03:59
  • In the meantime, I was looking for a solution to this challenge. I managed to find a solution by which you can use URL without embed and use the full screen button. It looks like this http://imgur.com/CipJgUy. If you want I can update my answer above. – Tomislav Stankovic Jun 18 '16 at 15:04
  • Wow, it looks great, Can u update your answer. Let me check this on actual device. – user1188867 Jun 19 '16 at 05:50
  • Did you test this on actual device . It does not play copyright videos.I tried this plugin earlier and i also tried using youtube api with my custom directive but none of them plays copyright videos. – user1188867 Jun 21 '16 at 01:29
  • I dont know where is disappeared my previous comment. Yes, i did test this on actual device. The only thing is that through testing I have not come across protected video for what it seemed that everything is working properly. It seems then that the only option is `Best Friends` which gives http://imgur.com/lkiKxZT. The only thing I can think of is to insert `addEventListener` with the new header which will be loaded at the top. – Tomislav Stankovic Jun 21 '16 at 17:39
  • I did not get that addEventListener part. What do you want me to do on addEventListener, can u share some code related to that? – user1188867 Jun 23 '16 at 05:07
  • I tried several options in the meantime, unfortunately without success. – Tomislav Stankovic Jul 07 '16 at 17:06