Comment insérer un iframe dans WordPress

by | 13 Fév 2020 | Blog, Tuto WordPress | 0 comments

On me demande souvent comment intégrer une iframe dans WordPress. Dans cet article, vous découvrirez également à quelles fins les Iframes sont nécessaires, quels sont les cas d’utilisation courante et comment vous pouvez afficher les Iframes dans WordPress facilement.

Qu’est-ce qu’un Iframe en fait ?

iFrame est le nom donné à une balise HTML utilisée dans le langage informatique pour intégrer dans une page HTML le contenu d’une autre page HTML. Un iframe est donc un élément HTML utilisé pour l’affichage structuré de contenu web externe. À l’aide d’une iframe, des cartes Google ou des vidéos YouTube peuvent être intégrés dans un site web (WordPress). Les iframes sont prises en charge depuis la spécification HTML 4.0. Tous les navigateurs modernes prennent en charge l’intégration d Iframe

Pourquoi ai-je besoin d’un Iframe dans WordPress ?

Dans WordPress, les iframes sont utilisées pour intégrer des cartes ou des vidéos provenant de plateformes externes.

Intégrer Google Maps dans WordPress

Dans cette section, je vais vous montrer comment intégrer une carte Google Maps en tant qu’iframe dans WordPress.

  • Ouvrez d’abord Google Maps en cliquant ici.
  • Dans la recherche, entrez l’endroit que vous voulez montrer sur votre Google Map. À titre d’exemple, je vais maintenant prendre le siège social de Google en Belgique et intégrer une iframe dans WordPress (utiliser une iframe pour intégrer la carte Google Map dans WordPress).
Comment insérer un iframe dans WordPress 1
  • Cliquez ensuite sur le bouton « Partager » dans la barre de gauche. Après avoir cliqué sur le bouton « Partager » dans la barre latérale de Google Maps, une fenêtre apparaît. Vous pouvez maintenant choisir d’inclure la carte Google Map comme lien sur votre site web ou comme une carte Google Maps.
Comment insérer un iframe dans WordPress 2

Dans la vue suivante, vous verrez la carte, qui est générée par le code iframe standard.

  • vous avez la possibilité d’ajuster la taille de la carte. À cet effet, vous trouverez une petite lsite déroulante sous le bouton « Partager », avec laquelle vous pouvez choisir entre Grande 800 x 600px, Moyenne 600 x 450px (est sélectionné comme valeur par défaut), PEtite 400 x 300px et une taille personnalisée.
  • Selectionnez maintenant le code HTML généré et copiez-le.

Intégrer une vidéo YouTube dans WordPress

  • Rendez-vous sur le portail de YouTube, que vous trouverez ici.
  • Recherchez la vidéo que vous souhaitez inclure dans votre page WordPress
  • Si vous avez trouvé une vidéo que vous souhaitez intégrer dans votre page WordPress, cliquez sur le bouton de partage situé sous la vidéo.
Comment insérer un iframe dans WordPress 3
  • Dans le PopUp suivant, cliquez sur le bouton Intégrer (le premier). Dans le PopUp suivant, vous trouverez un lien pour intégrer la vidéo YouTube
  • Dans cette dernière étape, vous  pouvez effectuer de multiples configurations.
    En plus de la taille de l’iframe, vous pouvez également définir à quelle minute la vidéo doit commencer, si d’autres vidéos doivent être proposées à la fin de la vidéo ou si les commandes de lecture de la vidéo doivent être affichées.
Comment insérer un iframe dans WordPress 4

Intégrer un Iframe sur WordPress

  • Via Gutenberg

    Pour ce faire ajoutez simplement le code Html copié précédemment dans un bloc « code » comme illustré ci-dessous

Comment insérer un iframe dans WordPress 5
  • Via l’éditeur de texte ou le visual builder de Divi

Pour ce faire ajouter simplement un module texte
Assurez-vous simplement de cochez l’onglet « Text » souvent situé à droite de l’onglet « Visuel ».

Comment insérer un iframe dans WordPress 6

Sébastien Chaidron

Comment insérer un iframe dans WordPress 7
Depuis des années, je développe avec passion des sites web et je travaille pour vous en tant que développeur WordPress Freelance. Contactez-moi pour plus d’informations à support@easyonweb.be

Comment trouver des polices d’écriture sur d’autres sites web

Contenu de l'article Comment trouver des polices d'écriture sur dautres sites web ? Via l'inspecteur de page Via WhatFont Comment installer WhatFont Comment utiliser WhatFont Conclusion Mon Thème WordPress favoris!* Mon plugin Multilingue préféré ?* Chaque site web a...

Créer un formulaire dynamique sur WordPress

Contenu du tuto Créer un formulaire dynamique sur wordpress Description du plugin 1. Choisir une version (Free ou Premium) 2. Installation du plugin 3. Création votre premier formulaire 4. Ajout de champs dynamiques 5. Création du formulaire calculé 6. Traitement des...

Comment aligner verticalement le contenu avec Divi

Contenu de l'article Comment aligner verticalement le contenu avec Divi Résultat 1. Ouvrir les paramètres de la colonne 2. Harmoniser les hauteurs des colonnes 3. Accédez aux paramètres de la colonne ou si situe le contenu à centrer 4. Centrer le contenu verticalement...

Thème Divi pour WordPress – Test et avis

Contenu de l'article Thème Divi pour WordPress – Test et avis Qui est derrière Divi ? Que propose Divi ? Concevez des en-têtes et des pieds de page avec Divi Theme Builder Divi et SEO Téléchargement et prix de Divi Documentation et soutien sur le thème Les...

Wix ou WordPress, qui est le meilleur en 2020?

Wix ou WordPress? À lire absolument avant de choisir!Sébastien Chaidron | Webdesigner & Développeur Web freelance à BruxellesLorsqu'il s'agit de choisir une solution pour votre site web, quel système de gestion de contenu (CMS) vous conviendra le mieux, WordPress...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Catégories