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

.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

<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

<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

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