Направете всички вградени отговорни за съдържанието с Reframe.js

Най-трудната част за това вграждане на видеоклипове прави правилно ширината и височината. Тези цифри определете съотношението и когато са на разстояние от теб да получите някакъв видео плейър.

Това е вярно за всички вградени елементи като фреймове и джаджи на социалните медии. И тези неща могат да бъдат дори по-сложни с реагиращ дизайн, защото те обикновено са елементи, които не отговарят.

Но със Reframe.js, можеш да направиш всеки елемент, отговарящ на всяко аспектно съотношение.

Това е може би един от най-простите, но най-ценни JS плъгини в мрежата. Всъщност беше създаден от Dollar Shave Club което изненадващо има своя собствена GitHub страница.

Препратката е един от техните безплатни приставки построен за разработчици, които искат по-прост начин работа с отзивчиво вградено съдържание.

Очевидният виновник е вграденото видео от сайтове като YouTube и Vimeo. Това е известно трудно да се направят тези елементи отзивчиви без CSS хакове.

С Reframe.js вие просто изберете какъвто и елемент искате да насочите и преначертайте го използвайки нови рамки () функция.

Започнете, като добавите плъгина Reframe.js към уеб страницата си. Можеш изтеглете копие от GitHub, и това е само 1KB minified.

Тогава просто преминете функцията селектор за каквито и елементи да пренастроите. Заредете страницата и бум! Трябва да сте готови.

Например, да кажем, че имате няколко видеоклипа, вградени в сайта Ви. Можеш добавете класа .видео към вграденото, и използвайте това като селектор. нови рамки автоматично добавя div и клас около него за да създадете отзивчив стил.

Така че вашето JavaScript код ще изглежда така:

нови рамки ( "видео. ');

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

Този код е насочен към всички елементи с класа .видео и ги прави отзивчиви. Без допълнителни хакове, без допълнителен CSS. Разбира се, няма нищо лошо в използването на CSS метода, но трябва да го направите ръчно опаковане всички вградени видеоклипове с допълнителния клас.

Преправете точно ви спестява тази допълнителна стъпка и го донася чрез JavaScript. Да се провери демо и намерите някои основни кодови фрагменти, посетете началната страница на Reframe.js. Можеш изтеглете копие от кода направо от репо GitHub.