I´m developing an app with Ionic 5 and I've got the following problem:

I'm using the FullScreen API to activate full screen video. When the full screen is active, the header must also be visible.

I've tried with :fullscreen Css but the header is not in full screen, only the video.

This is the code:

<ion-header translucent="true">
    <ion-toolbar>
        <ion-title>Title</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <video controls preload="metadata" autoplay src="video_url.mp4"></video>
</ion-content>

And part of the .ts:

const currentVideo = document.querySelector('video');

if (currentVideo.requestFullscreen) {
      currentVideo.requestFullscreen();
}

If the video is in full screen, can you see the ion-header in any way?