Iframe

La balise <iframe> permet d’intégrer le contenu d'un fichier (html, pdf, video, css...) à l’intérieur de notre page.

1
<iframe src="document.pdf" width="400" height="600"></iframe>
Utilisation de main
Entête du site

partie principale du site

Section 1

Article 1

Article 2

Section 2

Article 3

Article 4

Pied de page
Interprétation de balises

DéfinitionGoogle Maps

Pour intégrer une carte Google Maps sur votre page, allez sur la page www.google.com/maps/

  • Sélectionnez votre adresse

  • Cliquez sur l’Icône partager.

  • Cliquez sur Intégrer une carte.

  • Cliquez sur Copier le contenu HTML.

  • Collez le code HTML dans votre page.

1
<iframe 
2
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1029.3944115454558!2d1.5957407441865177!3d50.72255841251299!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47dc2c68523ad941%3A0xbe0402f91bb2617d!2sFCU+C%C3%B4te+d&#39;Opale+(Site+de+Boulogne-sur-Mer)!5e1!3m2!1sfr!2sfr!4v1539865410742"
3
  width="400" height="300" frameborder="0" style="border:0" allowfullscreen>
4
</iframe>
Interprétation de balises

DéfinitionYoutube

Pour intégrer une vidéo Youtube sur votre page, allez sur la page Youtube.

  • Sous la vidéo, cliquez sur "Partager"

  • Cliquez sur Intégrer.

  • Copiez le code HTML.

  • Collez le code HTML dans votre page.

1
<iframe 
2
  width="280"
3
  height="157"
4
  src="https://www.youtube.com/embed/oPU8WmIkrYE"
5
  frameborder="0"
6
  allow="autoplay; encrypted-media"
7
  allowfullscreen>
8
</iframe>
Interprétation de balises

DéfinitionAttributs

allowfullscreen : on autorise le passage plein écran.

width, height : largeur et hauteur de l'iframe.

src : source du document à afficher.