Адаптивные видео

Как сделать адаптивное видео, которое подстраивается под экран.

  1. Вставляем видео, оборачиваем в div.
    <div class="wrapper">
        <iframe>...</iframe>
    </div>
  2. Div-у задаём стили:
    .wrapper{
        position: relative;
        padding: 14% 0;
        height: 0;
    }
  3. Iframe тоже:
    .wrapper iframe{
        left: 0;
        position: absolute;
        top: 0;
    }

В зависимости от соотношения сторон видео, значение padding, возможно, потребуется подкорректировать.

comments powered by HyperComments

Автор

webbeaver

webbeaver

Верстаю, читаю, учусь