L’<iframe> est un contenu de navigation imbriqué qui permet d’obtenir une page HTML intégrée dans la page courante.
Cette <iframe> est responsive quand elle s’adapte à la taille de l’écran.

Ici, je présente trois exemples d’intégration.
Le css est identique pour les trois situations : je crée une classe site

Le css 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.site {
  position: relative;
  width:100%;
  margin:auto;
  padding-bottom: 75%; // This is the aspect ratio
  height: 0;
  overflow: hidden;
  border:2px solid #ccc;
  border-radius:1em;
}
.site iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

1. Une Street View 

Code html 

1
2
3
<div class="site">
  <iframe src="url_de_la_streetview" width="600" height="650" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

2. Une carte locale 

Pour Hugo, je crée un répertoire page_html dans /static et j’y place mon fichier (carte.html)

Code html 

1
2
3
<div class="site">
  <iframe src="/page_html/carte.html" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

3. Un site 

Code html 

1
2
3
<div class="site">
  <iframe src="url_du_site"  frameborder="0" style="border:0" allowfullscreen></iframe>
</div>