Plyr: Microsoft Edge Full Screen Issue

[claytonmassey]

Expected behaviour

When minimizing a video from full screen while video is playing in microsoft edge, the video should return to its default size and user should have access to all video controls

Actual behaviour

Video controls become hidden, they appear to fall out of bounds with the video box. This is happening on your demo plyr as well. https://plyr.io/

Steps to reproduce

Start a video in microsoft edge, click the expand button, minimize the fullscreen video. Notice the controls fall out of the video player

Environment

• Browser: Edge
• Version: 17.17
• Operating System: Windows
• Version: 10

Screenshot of issue

[sampotts]

This is really a bug with Edge but I’ll see if we can do a workaround by forcing a redraw or something I guess.

[claytonmassey]

Thanks Sampotts for taking a look at it and responding quickly

[VeronicaM]

Hey, I am interested in a fix for this as well. Also wondering if it would be possible to have a forceNativeFullscreen option ?

[PaulLayLow]

@VeronicaM We also had this issue and currently testing it out on other resolutions but so far this has been working for me. Add this to you CSS:

@supports (-ms-ime-align:auto) {
    .plyr__progress {
        width: 50%;
    }
}

The @supports... applies it only on MSEdge Browsers.

[FlipgridMartin]

We just ran into this, it happens whenever you go from a larger width video to a smaller width video in Edge. We had a similar fix that didn't seem to effect other browsers:

.plyr__progress,
.plyr__volume {
  width: 0px;
}

[arctouch-mateuspaulino]

We just ran into this, it happens whenever you go from a larger width video to a smaller width video in Edge. We had a similar fix that didn't seem to effect other browsers:

.plyr__progress,
.plyr__volume {
  width: 0px;
}

Worked for me @FlipgridMartin ! Thank you very much!