Κάντε όλο το ενσωματωμένο περιεχόμενο να ανταποκρίνεται με το Reframe.js

Το πιο περίεργο κομμάτι ενσωμάτωση βίντεο παίρνει το πλάτος και το ύψος σωστά. Αυτοί οι αριθμοί καθορίστε τον λόγο διαστάσεων και όταν είναι μακριά θα σας πάρτε ένα βίντεο αναπαραγωγής.

Αυτό είναι ισχύει για όλα τα ενσωματωμένα στοιχεία όπως τα iframes και τα widget κοινωνικών μέσων. Και αυτά τα πράγματα μπορεί να είναι ακόμη πιο δύσκολα με την αποκρίσιμη σχεδίαση επειδή είναι συνήθως δεν ανταποκρίνονται σε στοιχεία.

Αλλά με Reframe.js, μπορείς να κάνεις οποιοδήποτε στοιχείο ανταποκρίνεται σε οποιοδήποτε λόγο διαστάσεων.

Αυτό είναι ίσως ένα από τα απλούστερα αλλά πιο πολύτιμα JS plugins στο διαδίκτυο. Ήταν πραγματικά δημιουργήθηκε από το Dollar Shave Club η οποία έχει εκπληκτικά τη δική της σελίδα GitHub.

Το Reframe είναι ένα από τα δωρεάν plugins τους χτισμένο για προγραμματιστές που θέλουν έναν απλούστερο τρόπο χειρισμός ευαίσθητου ενσωματωμένου περιεχομένου.

Ο προφανής ένοχος είναι ενσωματωμένο βίντεο από τοποθεσίες όπως το YouTube και το Vimeo. Είναι γνωστό είναι δύσκολο να γίνουν αντιληπτά αυτά τα στοιχεία χωρίς CSS hacks.

Με το Reframe.js, απλά επιλέγω όποιο στοιχείο θέλετε να στοχεύσετε και να το αναδιαμορφώσετε χρησιμοποιώντας το reframe () λειτουργία.

Αρχίστε προσθέτοντας το plugin Reframe.js στην ιστοσελίδα σας. Μπορείς κατεβάστε ένα αντίγραφο από το GitHub, και είναι μόνο 1KB minified.

Τότε, απλά περάστε τη λειτουργία έναν επιλογέα για όσα στοιχεία θέλετε να αναδιαμορφώσετε. Τοποθετήστε τη σελίδα και έκρηξη! Θα πρέπει να είστε έτοιμοι.

Για παράδειγμα, ας υποθέσουμε ότι έχετε ενσωματώσει μερικά βίντεο στον ιστότοπό σας. Μπορείς προσθέστε την τάξη .βίντεο στην ενσωμάτωση, και να το χρησιμοποιήσετε ως επιλογέα. Επαναπροσδιορισμός αυτόματα προσθέτει ένα div και μια τάξη γύρω από αυτό για να δημιουργήσετε το ανταποκρινόμενο ύφος.

Έτσι, το δικό σου Κώδικα JavaScript θα έμοιαζε έτσι:

reframe ('. βίντεο');

Πολύ απλό δικαίωμα?

Αυτός ο κώδικας στοχεύει σε όλα τα στοιχεία της κλάσης .βίντεο και τους κάνει να ανταποκρίνονται. Δεν υπάρχουν πρόσθετα hacks, χωρίς επιπλέον CSS. Χορηγείται ότι δεν υπάρχει τίποτα λάθος με τη χρήση της μεθόδου CSS, αλλά θα πρέπει να περιτύλιξη με το χέρι όλα τα ενσωματωμένα βίντεο με την πρόσθετη κλάση.

Ανακατασκευάστε μόνο σας σώζει αυτό το επιπλέον βήμα και φέρνει όλα μέσα από το JavaScript. Προς το δείτε μια επίδειξη και βρείτε κάποια βασικά αποσπάσματα κώδικα, επισκεφθείτε την αρχική σελίδα του Reframe.js. Μπορείς κατεβάστε ένα αντίγραφο του κώδικα απευθείας από το repo της GitHub.