Срок работы пробной версии продукта истек. Через две недели этот сайт полностью прекратит свою работу. Вы можете купить полнофункциональную версию продукта на сайте www.1c-bitrix.ru. CSS стили для адаптивного Youtube iframe видео
Есть ответы на вопросы сертификации? Хочешь поделиться новостью о своем проекте? Тогда пиши нам!

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

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.

 445 CSS, YouTube
18 июня 2017
Команда BXCert

Наша команда разрабатывает портал BXCert, а также занимается разработкой сайтов на CMS 1С-Битрикс. Все участники являются сертифицированными специалистами Bitrix.

Возможно Вам будет интересно

Комментарии

Чтобы оставлять комментарии необходимо зарегистрироваться и пройти авторизацию.