Сделайте весь встроенный контент отзывчивым с Reframe.js

Самая сложная часть встраивания видео – правильная ширина и высота. Эти числа определяют соотношение сторон, и когда они выключены, вы получите изящный видеоплеер.

Это верно для всех встроенных элементов, таких как iframes и виджеты социальных сетей. И эти вещи могут быть еще сложнее с адаптивным дизайном, потому что они, как правило, не адаптивные элементы.

Но с Reframe.jsВы можете сделать любой элемент отзывчивым для любого соотношения сторон.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: 50 полезных адаптивных инструментов веб-дизайна для дизайнеров

Это, пожалуй, один из самых простых, но наиболее ценных плагинов JS в сети. На самом деле он был создан Dollar Shave Club, который на удивление имеет свои Страница GitHub,

Reframe – это один из их бесплатных плагинов, созданный для разработчиков, которым нужен более простой способ обработки адаптивного встроенного контента.

Очевидным виновником является встроенное видео с таких сайтов, как YouTube и Vimeo. Общеизвестно, что трудно заставить эти элементы реагировать без CSS хаки,

С помощью Reframe.js вы просто выбираете любой элемент, на который хотите настроить таргетинг, и перефреймируете его с помощью функции reframe ().

Начните с добавления плагина Reframe.js на свою веб-страницу. Вы можете скачать копию от GitHubи это только 1 КБ.

Затем вы просто передаете функции селектор для любых элементов, которые вы хотите изменить. Загрузите страницу и бум! Вы должны быть все готово.

Например, допустим, у вас есть несколько видео, встроенных на ваш сайт. Вы можете добавить класс .video для встраивания и использовать его в качестве селектора. Reframe автоматически добавляет div и класс вокруг него для создания адаптивного стиля.

Итак, ваш код JavaScript будет выглядеть так:
Reframe ( ‘видео’);
Довольно просто, верно?

Этот код предназначается для всех элементов с классом .video и делает их отзывчивыми. Никаких дополнительных хаков, никаких дополнительных CSS. Конечно, нет ничего плохого в использовании метода CSS, но вам нужно будет вручную обернуть все встроенные видео дополнительным классом.

Reframe просто экономит вам этот дополнительный шаг и делает все это с помощью JavaScript. Чтобы проверить демонстрацию и найти некоторые основные фрагменты кода, посетите Reframe.js домашняя страница, Вы можете скачать копию кода прямо с GitHub репо,

Читайте также: 30 полезных адаптивных уроков по веб-дизайну