HTML 5: Адаптивное видео (css video adaptive)

 
<div id="video">
    <video id="video" src="/mp.mp4" controls="" poster="/mp.jpg"></video>
</div>

<br/><br/><br/><br/><br/><br/><br/>

<p>text</p>

 
    #video {
        width: 99%;
        height: 100%;
        position: relative;
        overflow: hidden;
        min-height: calc(100vh - 50px);
        margin: 0 auto;
        border: 1px solid red;
    }

   #video video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 0;
        width: 100%;
        height: auto;
        max-height: 100%;
        border: 1px solid green;
    }


    @media (max-width: 768px ) {
        #video {
            min-height: auto;
            height: auto;
        }
        
        #video video {
            transform: translate(0%,0%);
            position: static;
        }
    }