Rendre tout le contenu intégré sensible avec Reframe.js

La partie la plus délicate à propos de incorporer des vidéos devient la largeur et la hauteur correcte. Ces chiffres définir les proportions et quand ils sont partis tu vas obtenir un lecteur vidéo insipide.

C'est vrai pour tous les éléments incorporés tels que les iframes et les widgets de médias sociaux. Et ces choses peuvent être encore plus délicates avec un design réactif, car elles sont généralement éléments non sensibles.

Mais avec Reframe.js, tu peux faire tout élément sensible à n'importe quel rapport d'aspect.

C’est peut-être l’un des plugins JS les plus simples et les plus précieux du Web. C'était en fait créé par Dollar Shave Club qui a étonnamment sa propre page GitHub.

Reframe est un de leurs plugins gratuits construit pour les développeurs qui veulent un moyen plus simple de gestion du contenu intégré réactif.

Le coupable évident est la vidéo intégrée de sites tels que YouTube et Vimeo. C'est notoirement difficile de rendre ces éléments sensibles sans hacks CSS.

Avec Reframe.js, vous venez de sélectionner quel que soit l'élément que vous souhaitez cibler et recadrer en utilisant le recadrer () une fonction.

Commencez par ajouter le plugin Reframe.js à votre page Web. Vous pouvez télécharger une copie de GitHub, et ce n'est que 1Ko minified.

Ensuite, vous venez passer la fonction un sélecteur pour tous les éléments que vous souhaitez recadrer. Charger la page et boum! Vous devriez être tous ensemble.

Par exemple, supposons que vous ayez quelques vidéos intégrées sur votre site. Vous pouvez ajouter la classe .vidéo à l'embarquement, et l'utiliser comme sélecteur. Recadrer ajoute automatiquement un div et classe autour de lui créer le style responsive.

Donc votre Code JavaScript ressemblerait à ceci:

recadrer ('. vidéo');

Assez simple droit?

Ce code cible tous les éléments de la classe .vidéo et les rend sensibles. Pas de hacks supplémentaires, pas de CSS supplémentaire. Certes, il n’ya rien de mal à utiliser la méthode CSS, mais vous devrez emballer manuellement toutes les vidéos intégrées avec la classe supplémentaire.

Recadrer juste vous sauve cette étape supplémentaire et apporte le tout avec JavaScript. À voir une démo et trouver des extraits de code de base, visitez la page d'accueil de Reframe.js. Vous pouvez télécharger une copie du code directement depuis le repo GitHub.