9

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

Community
  • 1
  • 1
raphael
  • 2,762
  • 5
  • 26
  • 55

2 Answers2

6

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.

matrixanomaly
  • 6,627
  • 2
  • 35
  • 58
  • After a bit of effort I got this to work. I had abandoned the solution suggested in the blog post I linked to in my question because the use of `
    ` in my markdown posts broke other markdown formatting outside of the `
    `. Turns out (I think) this was due to my theme using `redcarpet` as a parser. Switching to `kramdown` worked. **Question** I don't quite follow your first sentence. I'm currently using a plugin in QGIS to generate a standalone leaflet map its own folder and with its own `index.html` I am then using the iframe to embed the map within a post.
     – raphael Jul 29 '15 at 17:22
  • 1
    @raphael ah i see. Well what I meant by the first sentence is that you can 'insert' snippets of whatever you want using the `{% include filename.html %} syntax, which I thought might be something you might be doing. It's used to include a header bar for example, here's the doc for it: http://jekyllrb.com/docs/templates/#includes – matrixanomaly Jul 29 '15 at 22:45
0

CSS Helper

.is-fullwidth {
    width: 100%;
}

In markdown

    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" class="is-fullwidth" height="315px"
    </iframe>
Arash Outadi
  • 446
  • 7
  • 16