Ionic embed video - exit fullscreen mode

Question

I have Ionic app with embedded Vimeo videos. I embed video as described in the official Vimeo documentation:

<iframe src="https://player.vimeo.com/video/...?api=1&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Everything works well in browser.

In android emulator and real devices videos play in fullscreen mode. It's OK.

The problem happens when I try to exit fullscreen mode. On emulator and some devices when I press back button the app closes silently, on others - app closes with error.

What am I missing?

How can I exit the player and navigate back to the page where iframe with video is rendred?

Thanks!

Answer 1

I managed to play video using cordova-plugin-streaming-media. But you need a direct .mp4 link to the video file. It was my case because we had an Vimeo PRO account.

In controller:

var options = {
    orientation: "landscape"
};

$scope.playVideo = function() {
  window.plugins.streamingMedia.playVideo("http://.../video.mp4", options);
};

Answer 2

Update the plugin to latest version and make sure <iframe /> tag should not be inside <ion-item> or any ionic tag. Just simply wrap <iframe /> tag in <div> tag. It is working for me. Here is my code.

<div>
  <iframe src="https://player.vimeo.com/video/301857805?api=1&loop=1&title=0&byline=0&portrait=0&autopause=1"
    frameborder="0" width="100%" height="100%" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>