Incorporer facilement des vidéos sensibles avec SuperEmbed.js
Le web moderne est entièrement réactif et de plus en plus de designers le réalisent tous les jours. Mais il y a un défi embêtant en matière de conception réactive: contenu intégré.
Chaque site vidéo de YouTube à Vimeo a une code d'intégration par défaut fixé à une certaine taille. Cela signifie que les développeurs doivent utiliser d'autres solutions pour créer des vidéos entièrement réactives.
Cependant, au lieu d’utiliser une classe de conteneur CSS, vous pouvez utiliser SuperEmbed.js, une bibliothèque JavaScript gratuite pour créer des vidéos réactives.
Ce plugin résout deux problèmes immediatement. Toutes les vidéos intégrées étirer pour remplir le récipient principal, tout en étant assez souple pour redimensionner en fonction de la fenêtre du navigateur.
La meilleure partie est que SuperEmbed.js ne nécessite aucun code supplémentaire, alors tu peux juste intégrer les fichiers et laissez-les courir. Cette bibliothèque JS s’occupe du reste en cibler des éléments intégrés de certains sites.
Toutes les vidéos maintenir leurs proportions spécifiques, vous n'avez donc pas à vous soucier des dimensions décevantes. Et SuperEmbed fonctionne comme un bibliothèque JS vanille avec pas de dépendances comme jQuery.
En ce moment, SuperEmbed prend en charge plus de 15 vidéos intégrées parmi des sites tels que YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me et Archive.org (parmi beaucoup d'autres). Cette liste est toujours en croissance, alors attendez-vous à ce que plus de services de streaming vidéo soient ajoutés au fil du temps.
Pour que cet outil fonctionne, il vous suffit de télécharger la bibliothèque et ajoutez-le à l'entête de votre site ainsi:
Vous pouvez télécharger un copie complète du repo GitHub qui inclut également les spécifications pour sites vidéo pris en charge et support actuel du navigateur.
Pour la plupart, SuperEmbed prend en charge tous les navigateurs modernes à partir de FireFox 3.5+, Chrome 4+ et des versions d'Internet Explorer 9 ou ultérieur.
C’est une bibliothèque très impressionnante, compte tenu de la prise en charge du navigateur et de son efficacité. fonctionne dès la sortie de la boîte. C'est une solution beaucoup plus simple que les hacks CSS si vous êtes prêt à utiliser JavaScript.
Tu peux trouver Plus d'information sur GitHub et vous pouvez le voir vivre courir dans ce violon.
