<div id="Mfog" class="Mwrapper"><div class="Msliding-background"><div class="Mhider"></div> </div></div>

<nav class="Mvid">
    <video id="video">
       <source src="demo.mp4" type="video/mp4">
    </video>
    <div class="Mvideo" onclick="audioPause()"></div>
</nav>

.Mwrapper
{
    z-index: 2;
    position: fixed;
    bottom: 0%;
    margin-top: 120em;
}

.Msliding-background
{
    z-index: 2;
    background-color: red;
}

.Mhider
{
    z-index: 2;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.1),  rgba(0,0,0,0.2), rgba(0,0,0,1));
}
.Mvid
{
    z-index: -2;
    position: relative;
    margin-top: 25em;
    text-align: center;
}

.Mvid video
{
    position: relative;
    z-index: -1;
    height: 720px;
    width: 1280px;
}

.Mvideo
{
    bottom: 724px;
    left: 120px;
    position: relative;
    z-index: 0;
    height: 725px;
    width: 1280px;
    background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1));
}