Markdown Jekyll: Insert an iframe that fills the container

Question

how to include video in jekyll markdown blog explained me how to insert an iframe into a post. However, I'm using the iframe for a leaflet map. Unlike How to display a leaflet map in a single post in jekyll? I'm storing the map code in a separate location html file and am displaying the map within an iframe in my post. I'm hosting this on github so I can't use jekyll plugins.

I can get the map to display, but I don't understand how to make sure that the iframe fills the blog container in a way that is responsive to the browser window being resized. Is there a way to specify this only within the code for the blog post, or do I have to create my own css style like this blogpost

Answer 1

I'm assuming you're doing {% include mapName.html %} for your map codes, but either way your question is more based on containers and CSS styling, you'll probably need to either write your own styling to ensure iframes are responsive, here is an example, which is taken from and explained in detail here (please also refer to that site for more examples, you really should since it's a very detailed explanation). Here is a short example of the process, as mentioned in that post:

1. Create a div for your iframe with an id.:

   <div class="video-container">
       <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
       </iframe>
   </div>
   

2. Style the div in CSS:

   .video-container {
       position: relative;
       padding-bottom: 56.25%;
       padding-top: 35px;
       height: 0;
       overflow: hidden;
   }
   

3. And finally style the iframe:

   .video-container iframe {
       position: absolute;
       top:0;
       left: 0;
       width: 100%;
       height: 100%;
   }
   

That being said if your map code is not entirely unique, you could just go the easier route and not deal with any CSS styling with a service like embed.ly, which I use on my own blog when embedding videos and iframes since it does responsive images using Javascript.