Для тех, кто не в курсе. Адаптивный дизайн сайта – это такая штука, когда сайт может сам подстраиваться под размер дисплея, на котором он просматривается. Смысл адаптивного дизайна в том, чтобы пользователю одинаково комфортно было просматривать сайт как на большом стационарном мониторе, так и на экране смартфона. Для этого все элементы сайта должны иметь возможность масштабирования – т.е. изменения своего размера в зависимости от размера экрана. В данном примере рассмотрим, как сделать так, чтобы видеоролик или флеш на вашем сайте мог самостоятельно адаптироваться под размеры дисплея.

Делается это довольно просто – код вставки видео надо поместить в специальный контейнер – например, назовем его video-container:

<div class="video-container">
<iframe width="auto" height="auto" src="https://www.youtube.com/..."
frameborder="0" allowfullscreen></iframe>
</div>

И описать стиль данного контейнера, которые и делают видео «резиновым», т.е. заставляют его растягиваться или сжиматься под размер экрана. Вот код:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

В принципе, на этом можно и остановиться. В этом случае видеоролик будет всегда «растянут» на максимальную ширину экрана. Иногда это неудобно. Иногда требуется, чтобы на больших экранах ролик имел ограничения по размеру. Для этого достаточно поместить код вызова видеоролика в еще один контейнер - video-wrapper:

<div class="video-wrapper">
<div class="video-container">
<iframe width="auto" height="auto" src="https://www.youtube.com/..."
frameborder="0" allowfullscreen></iframe>
</div>
</div>

А вот код описания стилей контейнера video-wrapper. В нем мы указываем, что ширина видеоролика на дисплее не может быть больше 640 пикселей:

.video-wrapper {
width: 640px;
max-width: 100%;
margin: 1em auto;
}

Теперь два важных замечания.

1. В коде вставки видео всегда указывайте значения параметров width и height. Пишите либо конкретные значения, либо "auto".
2. Формат видео может быть «квадратным» (4:3) и «прямоугольным» (16:9). Чтобы сохранить оригинальное соотношение сторон, указывайте для параметра padding-bottom контейнера video-container значение 75% в случае, если видео в формате 4:3 и 56.25% для формата 16:9.