Reaguj na wszystkie wbudowane treści dzięki Reframe.js
Najtrudniejsza część osadzanie filmów uzyskuje poprawną szerokość i wysokość. Te liczby zdefiniuj współczynnik kształtu a kiedy wyłączysz, będziesz zdobądź głośny odtwarzacz wideo.
To jest true dla wszystkich elementów osadzonych takie jak iframes i widgety mediów społecznościowych. A te rzeczy mogą być nawet trudniejsze w projektowaniu responsywnym, ponieważ są zwykle elementy nie odpowiadające.
Ale z Reframe.js, możesz zrobić dowolny element reagujący na każdy współczynnik kształtu.
Jest to prawdopodobnie jedna z najprostszych, ale najcenniejszych wtyczek JS w sieci. Tak było stworzony przez Dollar Shave Club co zaskakująco ma własną stronę GitHub.
Reframe jest jedna z ich darmowych wtyczek zbudowany dla programistów, którzy chcą prostszego sposobu obsługa responsywnej zawartości osadzonej.
Oczywistym winowajcą jest osadzone wideo z witryn takich jak YouTube i Vimeo. Jest notorycznie trudno sprawić, by te elementy reagowały bez hacków CSS.
Z Reframe.js po prostu Wybierz dowolny element, na który chcesz kierować i przeformułuj to używając reframe () funkcjonować.
Zacznij od dodania wtyczki Reframe.js do swojej strony internetowej. Możesz pobierz kopię z GitHub, a tylko 1KB minified.
Więc po prostu przekazać funkcję selektorowi niezależnie od elementów, które chcesz przeformułować. Załaduj stronę i bum! Powinieneś być cały ustawiony.
Załóżmy na przykład, że masz kilka filmów umieszczonych w witrynie. Możesz dodaj klasę .wideo do osadzenia, i użyj tego jako selektora. Reframe automatycznie dodaje div i klasę wokół niego stworzyć styl responsywny.
Więc twój Kod JavaScript wyglądałoby to tak:
reframe („. video”);
Całkiem proste prawo?
Kod ten kieruje wszystkie elementy do klasy .wideo i sprawia, że reagują. Bez dodatkowych hacków, bez dodatkowego CSS. Przyznane, że nie ma nic złego w używaniu metody CSS, ale musisz ręcznie zawijać wszystkie osadzone filmy z dodatkową klasą.
Tylko ramka oszczędza ci dodatkowego kroku i to wszystko dzięki JavaScriptowi. Do sprawdź demo i znajdź kilka podstawowych fragmentów kodu, odwiedź stronę główną Reframe.js. Możesz pobierz kopię kodu prosto z repo GitHub.
