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

13.04.2021

Когда требуется разместить на сайте видео, можно можно использовать HTML 5 тег video. А добавив несколько css стилей, он будет адаптироваться под разные экраны.

pic1

pic1

 
<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;
        }
    }


Категории: Web, HTML, CSS
Яндекс.Метрика