Intégration responsive

Une intégration adaptative est un extrait de [code d'intégration](/glossary/embed-code) qui redimensionne automatiquement le contenu intégré pour qu'il corresponde à la largeur et à la hauteur de son conteneur parent ou de l'écran du lecteur. Contrairement aux [iframes](/glossary/iframe) à dimensions fixes qui créent des barres de défilement horizontales ou laissent des espaces blancs vides, les intégrations adaptatives utilisent des largeurs en pourcentage et des techniques CSS de rapport d'aspect pour remplir l'espace disponible avec fluidité. Le contenu conserve ses proportions, que le conteneur fasse 1440 pixels de large sur un écran d'ordinateur ou 375 pixels de large sur un smartphone. Cette approche garantit que les flipbooks, documents, vidéos ou contenus interactifs intégrés s'affichent correctement sur tous les appareils, sans redimensionnement manuel ni code spécifique à chaque appareil.

Les lecteurs consultent le contenu depuis une grande variété d'appareils et de tailles d'écran. Si un flipbook intégré déborde sur mobile, les lecteurs doivent défiler horizontalement — un signal fort que la page n'est pas optimisée. Si l'intégration apparaît minuscule sur un écran large, le contenu devient illisible. L'une ou l'autre de ces situations augmente les taux de rebond et entame la crédibilité de la page hôte. Les intégrations adaptatives éliminent ces problèmes, gardant tes publications professionnelles et accessibles partout. Elles protègent aussi les [Core Web Vitals](/glossary/core-web-vitals) de ton site en réservant le bon espace de mise en page avant le chargement du contenu, évitant le [Cumulative Layout Shift](/glossary/cls).

FlipLink génère des codes d'intégration adaptative prêts à l'emploi pour chaque flipbook et document publié. Tu copies l'extrait d'intégration depuis les options de partage de ta publication et tu le colles dans n'importe quel site web, blog ou CMS. L'iframe s'ajuste automatiquement à la largeur du conteneur, et le lecteur de flipbook redimensionne ses pages en conséquence. Le code d'intégration inclut le chargement différé par défaut, de sorte que le flipbook ne se charge que lorsqu'il apparaît à l'écran, gardant ta page rapide. Tu peux aussi utiliser la fonctionnalité d'[intégration d'image cliquable](/features/clickable-image-embed) pour placer une vignette qui ouvre un lecteur adaptatif complet au clic — utile lorsque tu veux montrer un aperçu sans charger immédiatement le lecteur complet.

Les intégrations adaptatives fonctionnent généralement grâce à l'une de ces deux techniques CSS : - **Conteneur à rapport d'aspect** — un `div` englobant doté d'une propriété CSS `aspect-ratio` (par exemple, `aspect-ratio: 16 / 9`) et de `width: 100%`. L'iframe à l'intérieur est paramétrée pour remplir entièrement le conteneur. C'est l'approche moderne, prise en charge par tous les navigateurs actuels. - **Astuce du padding-bottom** — une technique plus ancienne où le conteneur utilise un `padding-bottom` en pourcentage (par exemple, `56.25%` pour du 16:9) afin de créer la bonne hauteur par rapport à la largeur. L'iframe y est positionnée en absolu. Cette méthode reste largement utilisée pour la rétrocompatibilité. Le code d'intégration de FlipLink utilise l'approche par rapport d'aspect avec une solution de repli, garantissant la compatibilité entre navigateurs. Les propriétés CSS clés sont `width: 100%`, `height: auto` et `border: none` sur l'iframe, combinées au rapport d'aspect du conteneur. Le résultat est une intégration qui occupe toute la largeur du conteneur dans lequel elle se trouve et redimensionne sa hauteur proportionnellement.

- **Place l'intégration dans un conteneur à largeur limitée** — si tu colles le code d'intégration dans une section pleine largeur, le flipbook s'étirera pour remplir toute la fenêtre d'affichage. Utilise une colonne de contenu ou un conteneur à largeur maximale pour le maintenir à une taille de lecture confortable. - **Évite de définir des hauteurs fixes en pixels** — cela anéantit l'intérêt de l'intégration adaptative. Laisse le rapport d'aspect contrôler la hauteur automatiquement. - **Teste sur plusieurs tailles d'écran** — prévisualise ta page sur ordinateur, tablette et téléphone pour confirmer que l'intégration se redimensionne correctement. La simulation d'appareil des DevTools du navigateur fonctionne bien pour des vérifications rapides. - **Utilise le chargement différé pour les intégrations sous la ligne de flottaison** — le code d'intégration de FlipLink inclut le chargement différé par défaut, mais si tu personnalises le code, conserve l'attribut `loading="lazy"` pour éviter de ralentir le chargement initial de la page. - **Une seule intégration par section de la fenêtre d'affichage** — intégrer plusieurs flipbooks dans une même vue de défilement peut submerger les lecteurs et ralentir la page. Espace-les ou utilise une [intégration d'image cliquable](/features/clickable-image-embed) pour laisser les lecteurs choisir quelle publication ouvrir.

1. **Publie ton flipbook** — le code d'intégration n'est disponible qu'après publication 2. **Copie le code d'intégration** — va dans les options de partage de ta publication et copie l'extrait d'intégration adaptative 3. **Colle-le dans ta page** — ajoute le code dans l'éditeur HTML de ton site web, le bloc d'intégration de ton CMS ou le widget de ton constructeur de pages 4. **Vérifie la largeur du conteneur** — assure-toi que l'élément parent a une largeur définie (pourcentage ou largeur maximale) afin que l'intégration sache à quelle largeur s'afficher 5. **Prévisualise sur les différents appareils** — vérifie les vues ordinateur, tablette et mobile pour confirmer un redimensionnement proportionnel 6. **Vérifie la vitesse de la page** — lance un audit Lighthouse pour confirmer que l'intégration n'a pas d'impact négatif sur le temps de chargement ou les scores de décalage de mise en page 7. **Envisage la liste blanche de domaines** — utilise la [liste blanche de domaines](/glossary/domain-whitelisting) pour restreindre les sites web autorisés à intégrer tes publications

Une intégration adaptative garantit que ton flipbook s'affiche correctement sur chaque écran, sans aucun dimensionnement manuel ni ajustement spécifique à l'appareil. C'est la façon la plus simple de placer des publications interactives sur n'importe quel site web tout en offrant une expérience professionnelle et à chargement rapide à chaque lecteur.