CSS стили для адаптивного Youtube iframe видео

Совсем небольшая заметка о том, как сделать Youtube видео чуть более адаптивным на своем сайте. Идея в том, чтобы для различных экранов (ПК, планшет, мобильник) выводить iframe youtube видео в нужном размере и пропорции. Собственно сами CSS стили:

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;/* 16:9 */
    padding-top: 25px;
    height: 0;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ну и чтобы применить, необходимо просто обернуть iframe в div или p с классом video-wrapper. Пример можно посмотреть, например, в разделе новостей Операционная система Google Fuchsia.

 726 CSS, YouTube