Intégrer YouTube ou une page externe

Une intégration affiche un contenu hébergé par un autre service à l’intérieur de votre page. Vous réglez sa source et la place qu’il occupe ; son contenu reste géré par le fournisseur.

1. Choisir le bon élément

Pour une vidéo publiée sur YouTube, utilisez l’élément YouTube. Pour un fichier vidéo dans votre gestionnaire Communik, utilisez l’élément Vidéo. Pour une carte habituelle, préférez Google Map, avec ses champs Adresse et Zoom.

Un élément iframe sert à intégrer un autre service : formulaire, agenda ou widget dont le fournisseur autorise l’affichage dans une page externe. Il faut son adresse d’intégration, qui peut être différente du lien utilisé pour consulter le service.

Dans Design, sélectionnez l’élément. En Expert, les champs de contenu sont dans son panneau nocode. Si vous n’arrivez pas à sélectionner le cadre par un clic, ouvrez Calques et choisissez la ligne YouTube ou Intégrer. Cela sélectionne l’élément Communik sans actionner les boutons du service.

2. Renseigner la vidéo YouTube

Dans le groupe Vidéo, cliquez dans Youtube ID et remplacez l’identifiant. Dans une adresse comme https://www.youtube.com/watch?v=aqz-KE-bpKQ, l’identifiant est aqz-KE-bpKQ. Vérifiez que la vidéo choisie est autorisée à être intégrée sur un autre site.

La démonstration remplace une vidéo par Big Buck Bunny, un film public de la Blender Foundation, utilisé comme exemple. La miniature change dans le canvas. Aucun fichier vidéo n’est importé dans votre gestionnaire Communik.

Gardez la lecture manuelle et les contrôles visibles pour une vidéo que le visiteur doit regarder à son rythme. La lecture automatique, la boucle et les commandes se règlent dans le même groupe. Les restrictions du navigateur et celles de YouTube peuvent influencer leur fonctionnement. L’édition peut suspendre la lecture automatique : contrôlez toujours le résultat destiné au visiteur.

Voir le film utilisé dans la démonstration.

3. Renseigner un service externe

Sélectionnez le cadre Intégrer dans Calques. Dans le groupe Intégrer, cliquez dans Embed source et collez l’adresse d’intégration complète fournie par le service, en commençant généralement par https://.

Ce champ attend une adresse, pas un bloc de code HTML. Si le fournisseur donne un code d’intégration, récupérez l’adresse de son iframe. Ne collez pas toute la balise dans ce champ.

La démonstration passe d’un service affichant Bordeaux à un service affichant Paris. Elle utilise une carte comme exemple de cadre externe ; pour ajouter une carte normale au site, le réglage Google Map est plus simple.

Le panneau Communik ne permet pas de modifier les textes, boutons ou formulaires à l’intérieur de ce cadre. Effectuez ces modifications chez le fournisseur. Gardez aussi un lien direct vers le service lorsque cela aide le visiteur à l’ouvrir séparément.

4. Adapter les proportions et la place

Pour une vidéo YouTube horizontale, le lecteur utilisé ici conserve le format 16:9 lorsqu’il change de largeur. Pour le cadre iframe, ouvrez Taille, puis Ratio d’aspect : 16:9, 4:3 ou un autre format selon le service. La démonstration passe au 4:3 ; le cadre devient plus haut pour une même largeur.

La largeur suit le conteneur de la page. Évitez une largeur fixe supérieure à celle du téléphone. Un agenda ou un formulaire peut demander davantage de hauteur qu’une vidéo. Contrôlez son contenu entier, y compris ses boutons de validation, avant de retenir les dimensions.

Ne supposez pas que le service est adapté au mobile parce que le cadre l’est. Son propre contenu doit aussi se réorganiser correctement. Les démonstrations sont contrôlées dans la prévisualisation publiée à 1440 et 375 pixels.

5. Enregistrer et vérifier comme un visiteur

Enregistrez, rechargez la page et vérifiez la source. Dans la prévisualisation publiée, lancez la vidéo manuellement et utilisez les commandes du service. Refaites ce contrôle sur téléphone, puis faites défiler la page : le cadre doit rester dans la largeur disponible.

Si le cadre est vide, vérifiez l’adresse, les permissions de partage et l’autorisation d’intégration du fournisseur. Un site qui refuse les iframes ne devient pas intégrable simplement parce que vous renseignez son adresse. Vérifiez aussi le chargement avec les réglages de consentement de votre site ; le champ de source ne configure pas à lui seul cette politique.

Pour une information indispensable, gardez une version textuelle ou un lien direct. Une intégration dépend d’un autre service et de la connexion du visiteur.