title: Responsive iframe for Mapbox service
body: <p>I need you help. </p>
  
  <p>I'm a colombian data journalist with some basic knowledges on HTML, CSS and JS but I've been trying to solve this issue for hours without an answer. I already looked at here and other forums but couldn't make it work. </p>
  
  <p>I created this map with Mapbox JS that shows some data about bachelors degree performance in all the states of Colombia </p>
  
  <p><a href="http://jsfiddle.net/camilomoreno/rcae1jpo/" rel="nofollow">http://jsfiddle.net/camilomoreno/rcae1jpo/</a></p>
  
  <p>Here is my Iframe</p>
  
  <pre><code>&lt;iframe src="http://camilomorenokuratomi.com/infographics/coleducacion/mapbox.html" height="600" width="900" scrolling="no"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>What I want is to make this map responsive. I'm only interested in shrinking the size of the map,but keeping the ratio, like I have seen for youtube videos and even google maps, but  sadly I couldn't repeat the same process with my map. </p>
  
  <p>Could you please lend me a hand?</p>
  
  <p>Thanks in advance</p>