iFrame

Un iFrame est un cadre numérique utilisé dans une page Web afin d’y charger un autre document HTML. Ce document HTML peut contenir du code JavaScript ou CSS, lequel est chargé au moment de l’analyse de la balise iFrame par le navigateur.

Les utilisateurs de WordPress rencontrent souvent des iFrames lorsqu’ils tentent d’intégrer quelque chose d’une source externe dans leur site WordPress. L’exemple le plus courant de code d’intégration iFrame est celui dédié à l’intégration d’une vidéo YouTube, qui ressemble à ceci :

<iframe width="560" height="315" src="https://www.youtube.com/embed/Q_0-ycmP7B4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Dans l’exemple ci-dessus, la balise iFrame charge le lecteur vidéo de YouTube. Il définit d’autres paramètres, dont la hauteur, la largeur, la bordure, etc. Ces paramètres seront utilisés par le script qui charge le lecteur vidéo YouTube.

De nombreux sites Web tiers peuvent fournir aux utilisateurs un code iFrame permettant d’insérer certains éléments sur leurs sites Web. Le plus souvent, les fournisseurs de services d’analyse Web, les sites de médias sociaux et les sites de partage de vidéos proposent aux utilisateurs d’intégrer du code en format iFrame.

Attention : Il est conseillé aux utilisateurs d’être prudents lorsqu’ils sont invités à intégrer du code iFrame dans leur site Web. En effet, vous ne devez intégrer un code iFrame à votre site Web que s’il vient d’une source fiable et que vous êtes certain de l’identité du site Web visé. Parfois, les pirates peuvent également laisser un code iFrame dans un site WordPress en tant que « open gate ». Ce code se charge dans un iFrame et permet donc aux pirates d’accéder à distance à un site WordPress piraté.

Rendre vos iFrames et vos vidéos Youtube responsive

À ajouter dans votre fichier CSS :

.responsive-video {
    position:relative;
    padding-bottom:56.25%;
    padding-top:60px;
    margin-bottom:20px;
    overflow:hidden
}

.responsive-video iframe,.responsive-video object,.responsive-video embed{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}

À ajouter dans votre article ou page :

<div class="responsive-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/Q_0-ycmP7B4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>