Ionic / Cordova with embedded video takes over web view

In a simple Ionic app I have a plain web view with some embedded videos. These embedded videos are included with an oEmbed iframe. Video works fine, but almost every video provider has a link to watch the video on the provider's page. For example Youtube always has a button 'watch on Youtube'.

When my users (accidentally) click that link, the whole Cordova web view is taken over by the linked URL. Instead of my app it shows the Youtube video. Then the user never gets to go back to my app, except by closing and opening the app.

I've tried to:

  • Prevent navigation by watching $locationChangeStart, that doesn't work as it doesn't fire for external URLs (like Youtube's).
  • Prevent navigation by using window.onbeforeupload, but that doesn't suffice as it doesn't guarantee the user navigates away and it presents an ugly confirmation popup.

Any other ideas on how to prevent navigation to external URLs from an Ionic/Cordova app would be highly appreciated.

You should provide more info, how do you insert the videos? some code?

I don't use videos, but I had a similar problem with google maps, if the user clicks the legal link, the page nativate to the google legal page and the user can't go back.

To fix this, I installed inAppBrowser plugin and used this code to open the legal page inside the inAppBrowser window

$('#map_canvas').on('click', 'a', function(e){
    e.preventDefault();//you prevent the default click
    window.open($(this).attr('href'), '_blank');//you open the link on the inAppBrowser window
});

So you should inspect the video to see if you can do something like this, preventing the link click and opening it on the inAppBrowser plugin

You will have this problems using externa players, a possibel solution would be to host the videos on your server and use some jquery/angular video player.

insert 

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

in your index.html. So when you open a link,it'll use your device browser.You can come back from the device browser to your application with android back button.

You should probably give your url's like this

var ref = window.open('https://www.******.com/', '_system', 'location=yes');