Video Tag On Safari 10 Goes Up After Few Seconds

after few seconds on reproducing the video, the video goes up 50% and shows the controls and just bottom half of the video. this issue happens only on Safari 10, tried on Safari 9

Solution 1:

I've found the issue: basically having the video positioned in the middle was hiding the controls, and the "controls" attribute on the html tag was forcing the video to have the controls, safari forces the controls to be shown that's why after few seconds the video gets pushed to the top, just to show the controls

just removing the "controls" attribute fixes the issue:

(here the jsFiddle: https://jsfiddle.net/antonino_R/d9tf0va3/14/ )

<divclass="wrapper"><divclass="wrapper-inner"><divclass="wrapper-video"><videoautoplayloopmuted ><sourcesrc="http://techslides.com/demos/sample-videos/small.mp4"type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/></video></div><divclass="site-centered clearfix"><headerclass="entry-header"><h1class="entry-title">this is a title</h1><h2class="entry-subtitle">this is some text</h2></header></div></div></div>

and the css is cleaner:

.wrapper {
    overflow: hidden;
    color: #FFF;
    border-top: 6px solid #9BA800;
    background-color: #404040;
    background: linear-gradient(145deg, #4040400%, #111100%);
    position: relative;
    z-index: 0;
}

.wrapper-video {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.wrapper-videovideo {
    width: 100%;
    -webkit-filter: opacity(0.6) contrast(1.5);
    filter: opacity(0.6) contrast(1.5);
    transform: translateY(-10%);
    -webkit-transform: translateY(-10%);
}

.site-centered {
    max-width: 78em;
    margin: 0 auto;
    padding: 01.5em;
}

.wrapper.entry-header {
    margin: 7.5em03.5em0;
    font-weight: 300;
    line-height: 1.5;
    overflow: auto;
    z-index: 10;
    position: relative;
    overflow: visible;
    margin-bottom: 4.5em;
}