Совсем небольшая заметка о том, как сделать 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.
Возможно Вам будет интересно