Problem with youtube iframe and android full screen

Ionic Framework ionic-v3
1

Hi. I built an app that I’m trying to run on both Android and iOS. Unfortunately the youtube iframe isn’t working properly on Android. Though it did work on ionic view when running tests, on Android when I try to play a video on full screen the video will play, but when I try to exit full screen mode the video freezes and the app effectively stops working.

This is the code I used to add iframe to the app:

  <iframe class="yt_player_iframe" width="100%" height="315" [src]="video.youtubeId | videoYoutube" frameborder="0" gesture="media"
    allow="encrypted-media" allowfullscreen></iframe>

Other relevant details:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v8.9.3
npm        : 5.5.1
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:
ANDROID_HOME : not set

Misc:
backend : pro

I’d appreciate any input on how to fix this.

2

iframe on Ionic needs actual pixel width. 100% width will not work.
Try to set it to 350px.

This is why I recommend using Videogular 2 instead of youtube iframe.
videogular.github.io/videogular2/docs/getting-started/how-videogular-works.html

Videogular works with 100% width…

3

Thank you so much! Tried it but unfortunately it didn’t fix the problem. On iOS videos are playing fine and full screen mode is responsive, so it’s exclusively a problem I’m having with Android.