Youtube embed won't go fullscreen (android only)

Ionic Framework ionic-v3
1

Hi

I have the following HTML template:

<ion-content scroll=false no-bounce>
    <div class="video-container">
        <iframe [src]="videoURL" frameborder="0" allowfullscreen></iframe>
    </div>
</ion-content>

And the typescript class:

export class VideoPage {
    videoURL:SafeResourceUrl;
    videoID:any;

    constructor(public navCtrl: NavController, public sanitizer:DomSanitizer, public params: NavParams){
            this.videoID = params.get('videoID');
            this.videoURL = sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube-nocookie.com/embed/' + this.videoID + '?rel=0&amp;showinfo=0;controls=0;autoplay=1&origin=http://example.com'); 
        }
}

The app is portrait only. In config.xml I added <preference name="Orientation" value="portrait"/>.

All my code works as I expect. The app doesn’t change to landscape when rotating the phone. The video plays, sound plays.

But:

On iOS, when double tapping the video, it changes to fullscreen. When in full screen and rotating the phone, the video plays in landscape. When double tapped again, video exits full screen and goes back to playing in the embedded iframe, in portrait mode (as the app orientation is locked in config.xml). This behaviour is exactly what I want.

In Android though, the video plays in the container (embedded iframe) and goes full screen, but it won’t rotate (and take up the entire screen).

Another issue I have is when pushing another page, in Android the video keeps playing in the background (you can still hear the video). This does not happen in iOS.

Any thoughts on having the video full screen (+rotated) in Android?

Thanks

1 Like
2

Hey :slight_smile:

Did you solve the issue?

1 Like
3

Hey Dominik

I kinda “solved” it, but it’s all but an elegant solution.

I manually unlocked screen rotation for the video page on Android only, and locked it again when navigating to another page or when touching the native back button.

The second issue, that Android keeps playing in background is solved. When navigating to another page or touching the native back button, I execute this code:

stopVideo() {
        this.videoIframe.nativeElement.setAttribute("src", this.videoIframe.nativeElement.getAttribute("src"));
}

Make sure to add #videoIframe to the iframe element in your HTML template.

<iframe #videoIframe [src]="videoURL" frameborder="0" allowfullscreen></iframe>
```
1 Like
4

Hey!
sry i missed your answer somehow :slight_smile:

i now solved it by simply displaying the video (and other iframe content) in a extra tab with the in-app-browser plugin.

So i’m displaying something like a preview image and then open the link in the in-app-browser.

best wishes

1 Like
5

it seems like screen rotation is not the only issue… in some cases youtube embed doesn’t play any video in full screen mode. I think there are some compatibility issues with cordova and iframe videos?