Зробіть весь вбудований контент відповідальним за Reframe.js

Найбільш складна частина вбудовування відео отримує правильну ширину та висоту. Ці цифри визначити співвідношення сторін і коли вони вийдуть отримати хитрий відеоплеєр.

Це вірно для всіх вбудованих елементів такі як фрейми і віджети соціальних медіа. І ці речі можуть бути ще складнішими, якщо вони реагують на дизайн нечутливі елементи.

Але з Reframe.js, Ви можете зробити будь-який елемент реагує на будь-яке співвідношення сторін.

Це, мабуть, один з найпростіших, але найцінніших плагінів JS в Інтернеті. Це було насправді створений компанією Dollar Shave Club який дивно має свою власну сторінку GitHub.

Ред один зі своїх безкоштовних плагінів побудований для розробників, які хочуть простіше обробка вбудованого вмісту.

Очевидним винуватцем є вбудоване відео з таких сайтів, як YouTube і Vimeo. Це горезвісно важко зробити ці елементи чуйними без CSS хакі.

З Reframe.js, ви просто виберіть будь-який елемент, який ви хочете націлити і оновити його за допомогою перефармувати () функції.

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

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

Наприклад, припустимо, що на вашому сайті вбудовано декілька відео. Ти можеш додайте клас .відео до вставки, і використовуйте його як селектор. Оновити автоматично додає div і клас навколо нього створити стиль відгуку.

Так ваші Код JavaScript виглядатиме так:

ремарка ('. відео');

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

Цей код націлений на всі елементи з класом .відео і робить їх чуйними. Ніяких додаткових хаків, ніяких додаткових CSS. Немає нічого поганого у використанні методу CSS, але вам потрібно вручну всі вбудовані відео з додатковим класом.

Відрегулюйте просто економить цей додатковий крок і за допомогою JavaScript. До перевірте демо і знайдіть деякі основні фрагменти коду, відвідайте домашню сторінку Reframe.js. Ти можеш завантажити копію коду прямо з репо GitHub.