Ενσωματώστε ευαίσθητα βίντεο εύκολα με το SuperEmbed.js

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

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

Ωστόσο, αντί να χρησιμοποιήσετε μια κλάση CSS container, μπορείτε να τη χρησιμοποιήσετε SuperEmbed.js, μια ελεύθερη βιβλιοθήκη JavaScript για δημιουργία βίντεο με δυνατότητα απόκρισης.

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

Το καλύτερο μέρος είναι ότι SuperEmbed.js δεν απαιτεί επιπλέον κωδικό, έτσι μπορείτε απλά ενσωματώστε τα αρχεία και αφήστε τους να τρέξουν. Αυτή η βιβλιοθήκη JS φροντίζει τα υπόλοιπα στοχεύοντας ενσωματωμένα στοιχεία από συγκεκριμένους ιστότοπους.

Όλα τα βίντεο να διατηρήσουν τους ειδικούς λόγους τους, οπότε δεν χρειάζεται να ανησυχείτε για τις ασταθείς διαστάσεις. Και το SuperEmbed λειτουργεί ως a βιβλιοθήκη JS της βανίλιας με χωρίς εξαρτήσεις όπως το jQuery.

Αυτή τη στιγμή, SuperEmbed υποστηρίζει ενσωματωμένες ενσωματώσεις βίντεο 15+ από τοποθεσίες όπως το YouTube, το Vimeo, το Kickstarter, το DailyMotion, το Facebook, το Vid.me και το Archive.org (μεταξύ πολλών άλλων). Αυτή η λίστα είναι εξακολουθεί να αυξάνεται, οπότε περιμένετε περισσότερες υπηρεσίες βίντεο streaming να προστεθούν με την πάροδο του χρόνου.

Για να λειτουργήσει αυτό το εργαλείο, απλά πρέπει κατεβάστε τη βιβλιοθήκη και προσθέστε την στην κεφαλίδα του ιστότοπού σας όπως έτσι:

Μπορείτε να κατεβάσετε ένα να αντιγράψετε πλήρως από το repo GitHub που περιλαμβάνει επίσης προδιαγραφές για υποστηριζόμενες τοποθεσίες βίντεο και τρέχουσα υποστήριξη προγράμματος περιήγησης.

Ως επί το πλείστον, SuperEmbed υποστηρίζει όλα τα σύγχρονα προγράμματα περιήγησης από το FireFox 3.5+, το Chrome 4+ και τις εκδόσεις του Internet Explorer 9 ή νεότερο.

Αυτή είναι μια πολύ εντυπωσιακή βιβλιοθήκη, λαμβάνοντας υπόψη όλη την υποστήριξη του προγράμματος περιήγησης και πόσο καλά λειτουργεί σωστά από το κουτί. Είναι μια πολύ απλούστερη λύση από ό, τι τα CSS hacks αν είστε εντάξει με τη χρήση του JavaScript.

Μπορείς να βρεις περισσότερες πληροφορίες στο GitHub και μπορείτε να το δείτε ζουν τρέξιμο σε αυτό το βιολί.