Fullscreen from Vimeo video is shown behind tabs bar

Ionic Framework ionic-v3
1

Hi. I’m working on this app: http://app.mywayapp.io/ (web version from platform browser).
If you click on the top bar (logo) you will go to a page with several cards. One of them contains videos from Vimeo. I added them like this:

 22         <div class="iframeWrapper" *ngIf="v.video">
 23             <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(v.video)" frameborder="0"
 24                 webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 25         </div>

123 .iframeWrapper {
124     position: relative;
125     padding-bottom: 56.25%;
126     padding-top: 25px;
127     height: 0;
128     iframe {
129         position: absolute;
130         top: 0;
131         left: 0;
132         width: 100%;
133         height: 100%;
134     }
135 }

The problem is that when you click the fullscreen button from inside the video it goes fullscreen but keeps behind the tabs bar, so it’s not possible to access video controls anymore (pause, time line, etc).

1
1.jpg414×736 94.3 KB
2
2.png414×736 73.2 KB

z-index for the iframe (Chrome native) is already in a high level and tabs bar is just “10”.

Any suggestion? Thanks!

2

I ran into this same issue, did you ever figure out a solution?

3

No, I ended up making the video to open in system browser like an external link… If you find the solution please let us know. Thanks.

4

I found the best solution is to just create a modal of the video page since a modal does not inherit the tabs page, then I just edited the html to include a back button on the modal as well as the size of the modal to fit the device size.

full%20vimeo%20screen