How to integrate iframe maps responsive ?
In a Raw Text (HTML) copy/paste the following code :
With Google Maps:
<!-- Styles Flexible iFrame -->
<style>
.Flexible-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.fr/maps?q=bordeaux&oe=utf-8&aq=t&client=firefox-a&ie=UTF8&hl=fr&hq=&hnear=Bordeaux,+Gironde,+Aquitaine&t=m&z=11&iwloc=A&output=embed"></iframe>
</div>
With Bing Maps:
<!-- Styles Flexible iFrame -->
<style>
.Flexible-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe Name="mapFrame" scrolling="no" width="100%" height="512" frameborder="0" src="//www.bing.com/maps/embed/?lvl=13&cp=46.947954~7.444284&sty=r&draggable=true&v=2&dir=0&where1=Bern%2C+Schweiz&form=LMLTEW&pp=46.948429107666016~7.440460205078125&mkt=de-de&gen=false&emid=0268dbb0-0977-3717-0aff-4f79b8311370&w=100%&h=512"></iframe>
</div>
With Yahoo Maps:
<!-- Styles Flexible iFrame -->
<style>
.Flexible-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="100%" height="512" frameborder="0" src="//fr.maps.yahoo.com/embed#lat=44.836632&lon=-0.58105&zoom=13&mvt=m&trf=1&tt=&q=Bordeaux&conf=1&start=1"></iframe>
</div>
The element can be moved anywhere in the page and all standard style properties can be applied (Borders, Margins, Colors)
© Source : Alistapart.com | Webdesignerwall.com | Niklaus Gerber
