ionic-framework: ion-split-pane conflict with video fullscreen mode

Ionic version: (check one with “x”) [ ] 1.x [x] 2.x

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I’m building video app using ionic2. Everything goes fine when I play video without fullscreen mode. If I switch to fullscreen mode then all screen is totally in black.

Expected behavior:

Video can display in fullscreen when use ion-split-pane component. Steps to reproduce:

Related code:

    <ion-split-pane when="md">
       <ion-menu [content]="content">
        <ion-header>
          <ion-toolbar color="primary">
            <ion-title>Play list</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
        </ion-content>
      </ion-menu>
      
      <ion-nav #content [root]="rootPage" main></ion-nav>
    </ion-split-pane>
//I place video inside tabs
<video #video
       width="100%"
       autoplay
       controls>
</video>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.0.0
Xcode version: Not installed

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 2
  • Comments: 15 (1 by maintainers)

Most upvoted comments

@Spartanace1024 Fixed it for me

Ah I think I got it. Try adding a height: 100%; to the ion-split-pane this seems to resolve the issue for me.

Hi @klemensz, do you have any update on this?