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.
18 июня 2017
Команда BXCert
Наша команда разрабатывает портал BXCert, а также занимается разработкой сайтов на CMS 1С-Битрикс. Все участники являются сертифицированными специалистами Bitrix.
Возможно Вам будет интересно
Комментарии
ПочитатьВсе статьи
Telegram каналы и чаты для web разработчика
Сегодняшнюю небольшую заметку мы посвятим мессенджеру Telegram. Мы думаем ни для кого не будет секретом, что данный мессенджер сейчас очень популярен и что в рамках телеграма можно вести каналы, группы по интересам, чаты и конечно же просто общаться.
Полезные материалы
-
17 ноября 2017
Пример реализации консольного скрипта с подключением ядра 1С-Битрикс
Давно известно, что ряд операций выносят в отдельные php файлы и запускают из консоли, так как это зачастую удобнее, быстрее, да и в принципе на эти операции не нужен браузер. -
24 июля 2017
MySQL ошибка: InnoDB Error Fetch of persistent statistics requested for table
При разработке одного проекта, часто стали вылетать ошибки базы или просто бесконечная загрузка страницы. После попыток запустить сайт и перезапуска локального сервера - результат ноль. -
19 июля 2017
Битрикс отправка писем с вложениями без танцев с бубном
Отправка писем с аттачем в bitrix довольно распространенная задача, например, отсылать пользователям договора, анкеты, выписки и другие файлы. В интернете довольно много различных способов решения задачи. - Все советы разработчику →
Комментарии
-
13 июня 2018 в 17:08
Galinaced FrancisbaxVX: По моему мнению Вы пошли ошибочным путём.
-
31 мая 2018 в 15:03
Igorpi IgorpiNP: Номер не пройдет!
-
31 мая 2018 в 12:58
Galinaced FrancisbaxVX: Я извиняюсь, но, по-моему, Вы допускаете ошибку. Пишите мне в PM.
-
31 мая 2018 в 08:32
Alexeyced AlexeycedYO: Какие слова... фантастика
Блог
-
29 мая 2017
Обновление ответов сертификации и сайта Майское обновление сайта. -
2 ноября 2015
Новый дизайн портала BXCert Сегодня мы выпустили новый дизайн нашего проекта. Портал стал выглядеть более современно, как нам кажется. -
10 июня 2015
Новый дизайн и фильтр монитора фриланс бирж Рады сообщить, что мы выпустили новый дизайн раздела монитора проектов с фриланс бирж. Новый дизайн выполнен в минималистичном стиле, все проекты теперь оформлены более компактно. - Блог проекта →