Obtenez des codes d'intégration réactifs pour YouTube, Instagram, Google Maps et Vimeo

L'intégration de contenu Web tel que des vidéos YouTube est assez facile, car le service vous donne le code d'intégration et vous n'avez qu'à le coller. Le problème est que si vous collez le lien dans un site Web qui a un design réactif, l'image vidéo ne sera pas redimensionnée car le code d'intégration lui-même n'est pas réactif. Il en va de même pour les intégrations de Google Maps, Vimeo et Instagram. Si vous savez comment le faire, vous pouvez toujours modifier le code vous-même pour le rendre réactif, mais une manière beaucoup plus rapide et plus simple de le faire consiste à utiliser Intégrer de manière réactive. Il s'agit d'une application Web dédiée à vous fournir des codes d'intégration réactifs pour le contenu de services tels que YouTube, Vimeo, Google Maps et Instagram.

L'utilisation de Embed Responsively est assez simple. Vous devez d'abord trouver ce que vous intégrez, que ce soit un emplacement sur Google Maps, une vidéo sur YouTube ou Vimeo, ou une photo ou une courte vidéo sur Instagram. Vous n'avez pas besoin de copier le code d'intégration à partir de la propre fonctionnalité du service; copiez simplement l'URL de sa page. Ensuite, visitez Embed Responsively et sélectionnez-y le même service parmi les options disponibles.

Collez l'URL que vous avez copiée à partir du service, puis cliquez sur le bouton "Intégrer". Vous verrez un aperçu de la vidéo, de la carte ou de l'image que vous intégrez, et son code d'intégration réactif en dessous. Maintenant, tout ce que vous avez à faire est de coller le code d'intégration sur votre site Web comme vous le feriez avec tout autre code d'intégration généré automatiquement, et cela fonctionnera de manière réactive, en se redimensionnant selon la taille de l'écran.

Il va sans dire que si vous voulez que le code d'intégration réactif fonctionne comme annoncé sur votre site Web, le Le site Web lui-même doit avoir une conception réactive pour commencer, sinon il ne servira à rien d'utiliser une intégration réactive code. En effet, c'est votre site Web qui doit détecter un changement de taille d'écran. Vous pouvez tester le code sur le site Web Embed Responsively lui-même en collant un lien, puis en redimensionnant la fenêtre de votre navigateur. Vous verrez que l'aperçu qui y est généré se redimensionne lorsque vous modifiez la taille de la fenêtre. Il prend également soin de ne pas coller aux bords mêmes de la fenêtre, laissant un rembourrage des deux côtés.

Cela pourrait surprendre certains d’apprendre que le code intégré de sites Web tels que YouTube et Google Maps n’est pas réactif, en particulier lorsque des services comme Twitter et SoundCloud donnent aux utilisateurs un code d'intégration réactif en défaut. Intégrer de manière réactive vous aide également à trouver d'autres services qui le font, sous l'onglet "Plus".

Visitez Embed Responsively

[via Le prochain Web]