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

Самая хитрая часть о встраивание видео получает правильную ширину и высоту. Эти цифры определить соотношение сторон и когда они выходят, вы получить вонючий видеоплеер.

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

Но с Reframe.js, ты можешь сделать любой элемент, реагирующий на любое соотношение сторон.

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

Рефрейм есть один из их бесплатных плагинов построен для разработчиков, которые хотят более простой способ обработка реагирующего встроенного контента.

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

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

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

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

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

Так что ваши Код JavaScript будет выглядеть так:

реструктурировать ( 'видео.');

Довольно просто правильно?

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

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