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 довольно распространенная задача, например, отсылать пользователям договора, анкеты, выписки и другие файлы. В интернете довольно много различных способов решения задачи. - Все советы разработчику →
Комментарии
-
25 мая 2018 в 14:23
Andreyced AlexeycedYO: Слышал эту историю лет так 7 назад.
-
25 мая 2018 в 09:40
Igorpi IgorpiNP: ну так попробуй и отпишись по этому методу...
-
25 мая 2018 в 02:48
Galinaced GalinacedLB: Говоря откровенно, вы совершенно правы.
-
24 мая 2018 в 22:42
Alexeyced AlexeycedYO: В этом что-то есть. Спасибо за помощь в этом вопросе, может я тоже могу Вам чем то помочь?
Блог
-
29 мая 2017
Обновление ответов сертификации и сайта Майское обновление сайта. -
2 ноября 2015
Новый дизайн портала BXCert Сегодня мы выпустили новый дизайн нашего проекта. Портал стал выглядеть более современно, как нам кажется. -
10 июня 2015
Новый дизайн и фильтр монитора фриланс бирж Рады сообщить, что мы выпустили новый дизайн раздела монитора проектов с фриланс бирж. Новый дизайн выполнен в минималистичном стиле, все проекты теперь оформлены более компактно. - Блог проекта →