How to Include Video in Jekyll Markdown Blog

how to include video in jekyll markdown blog

You should be able to put the HTML for embedding directly into your markdown. Under the video, there is a "Share" button, click on this, and then the "Embed" button, which should give you something that looks a little like:

<iframe width="420" height="315" src="http://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Just copy and paste that into your post, the Markdown preprocessor won't touch it.


For Pygments, there is a whole pile of CSS stylesheets for various colour themes in this repository, you could experiment with them. (Note that you will have to replace .codehilite with .highlight for these to work with Jekyll.)

How to include video tag / mp4 videos in a Jekyll blog

To use the Octopress plugin, just save the video tag plugin in a _plugins folder.

Can I bring in a custom video iframe into Jekyll markdown blogs?

No problem, you can insert an embed code like <iframe width="560" height="315" src="https://www.youtube.com/embed/dHHmUF9gs70" frameborder="0" allowfullscreen></iframe> in a markdown file.

Jekyll blog hosted in github: how to insert youtube embeddings?

Try :

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Markdown Jekyll: Insert an iframe that fills the container

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.

How to include a HTML file inside a markdown file in jekyll?

You can use liquid tags in any markdown file so long as it has YAML header matter. For instance, check out the index.md given in the jekyllbootstrap template for Jekyll sites.

If you link to your actual index.markdown or your repository itself (e.g. if it's on github), we could probably get a better idea of what has gone wrong. Your example should work, though you might need to use HTML list element <li> rather than the markdown *.



Related Topics



Leave a reply



Submit