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>