fullscreen applied to whole document body and not working properly

dnjstlr555 commented 6 years ago

[ ] Issue does not already exist
[ ] Issue observed on https://plyr.io

Expected behaviour

apply fullscreen only video

Actual behaviour

after entering fullscreen mode, fullscreen can be scrolled and fullscreen does not wrapped to its document

Environment

Browser: Opera, Chrome, Safari, Vivaldi (Firefox and Edge are working)
Version: I'm not sure but maybe 2.0.18
Operating System: Windows, macOS
Version:

Players affected:

[X] HTML5 Video
[x] HTML5 Audio (Not tested)
[x] YouTube (Not tested)
[x] Vimeo (Not tested)

Steps to reproduce

Made a wrap which wraps all contents of document
Set wrap's height and width to 100vh, 100vw position: fixed z-index:9999 and display: flex, flex-direction: column; align-items:center; justify-content:center; because of contents center align (Documents are structured wrap, header, contents, footer. header's position is fixed, height is auto, width is 100%, z-index is 1 )
Make wrap visible and append(make) video element inside the wrap
Initialize plyr
Press Fullscreen button
As a result, It will be located top:0 and left:0, even the wrap's position is fixed, it pushes contents down(contents, footer), scroll bar and header will appear even its z-index is higher than the header

It's style

#wrap
{
    position: fixed;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    background: black;
    background:rgba(0, 0,0,0.8);
    align-items:center;
    justify-content:center;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index:99;
}

#view 
{ 
width: 100%; margin: 0; padding: 0;
-webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s ease, filter 0.2s ease;
 }

.plyr 
{
max-height:100vw;
}

This is document

<div id="wrap">
videos will append here
<video src = '....
</div>

<div id="header">
<!-- Header -->
    <div id="logo">
        <a id="" href="/">LOGO</a>
        <span">subtitle</span>
    </div>
    <div id="func">
        <a>Music</a>
        <a>Settings</a>
        <a>Gallery</a>
        <a href="">Select all</a>
        <a href="">User</a>
    </div>
</div>

<div id="view">
    <!-- Article -->
    <div id="article">
        <!-- Main -->
        <div id="form">
            <!-- End Of Main -->
        </div>
    </div>
    <div id="footer">
        <div id="floor">
            <a style='cursor: pointer;' onclick=alert(__info);>GOGOGOGO</a>
        </div>
    </div>
</div>

Some clue is that -webkit-full-screen style is applied twice. and If i append video to non style applied div or body itself, It works normaly.

Additional Video https://i.imgur.com/jUVICxu.mp4

Relevant links

I tried #503 But it didn't work at all. It still not works even if I set height to auto or null

sampotts commented 6 years ago

Could I suggest you give v3 a try? Head over to the beta branch for more info.

dnjstlr555 commented 6 years ago

Lucky, I was trying to update to v3 today. And.. I have same issues.

sampotts commented 6 years ago

I’m not sure what to say. Full screen works perfectly fine on the demo site https://plyr.io/beta. I’d suggest you have issues elsewhere unrelated to the plugin. Good luck with it.

dnjstlr555 commented 6 years ago

@sampotts Yeah I'm sorry. I found this issues on native player too. I think I miss styled my css or something wrong on my javascript

dnjstlr555 commented 6 years ago

Huh, overflow-x:hidden was the problem. I styled overflow-x to hidden on body, html tag so it cause those bugs.

sampotts / plyr