Embedding Videos in Markdown
This is the second article of the series “Markdown Tips & Tricks - Thinking Outside the Box”. On the previous article, it was explained how to deal with
html elements and classes when writing markdown files. Now we are going to show you how to embed videos.
On the first part of this article, treated like “Case A”, we will have covered the steps for embedding videos via
iframe, like you would do with YouTube videos. On the next, “Case B”, we will show you how to do that via
html 5 tag, used when you need to display a video from your site root files.
As we have explained on the previous article, there’s only a thing you need to worry abaout when adding
html elements to you markdown:
You need to leave a blank line between some regular markdown text and a html tag, otherwise you might face errors during files compilation!
<iframe> Tags - Embedding YouTube Videos
All right. Let’s begin by showing you how to embed YouTube videos, as found in our post How to publish your website on GitHub. Doing this can be a little tricky, as there are some steps to have covered up to make it be rendered correctly. Let’s see a live example, with a video we have used on the post we just mentioned. Here it is, down below. You will notice that you can resize your browser’s window and it will maintain its responsiveness.
We'll need to copy the code given by YouTube and paste it onto your markdown file, and from that we'll need to make a few corrections in order to make it work properly, according to step-by-step section below.
First: open in a web browser the YouTube video that you want to embed to your post and copy the
iframe. If you don’t know how to do that, learn from this 15 seconds video:
Second: paste the
<iframe> into a
Third: instead of leaving the atribute
allowfullscreen with no value, give it a value of “allowfullscreen”:
Fourth: Add a space in between opening and closing
<iframe> tags: instead of
<iframe></iframe>, make sure it looks like that:
Fifth: You can remove the proprieties of
hight given by YouTube iframe, as they will be replaced by the
<div> tag styles. But you can leave it there as well, it won’t make any difference.
Now your code will look like that:
We wrapped the
<iframe> tag within a
<div>, in order to provide full responsiveness to our embed videos. For making this happen, we have applied the following styles:
That’s it! Now you can use the code block we provided whenever you want to embed a YouTube video. Actually, the only thing you will need to change is the video id, given by the last part after the last forward slash. On this video
http://www.youtube.com/embed/E-ONNjFoOx0, its id is
Now, if you have videos that you don’t want to publish on YouTube and want them to be part of your media files, you will need a
<video> tag is very straight forward, exactly as we did for
<hr> tags on the previous article. Just add a
<video> tag to your markdown text and you are good to go!
Let’s see a live example with the code above, using a video we have in our blog assets:
As we did for the
<iframe>, we wrapped the
<video> tag within a
<div>, in order to provide full responsiveness to our videos, and we have applied exactly the same styles:
That’s it! Now you can use your
<video> tags whenever you want! Just replace the path and you’re done! The supported formats are:
.webm. If you want to check other methods and attributes that can be used with
<video> tags, go ahead and find them in W3Schools: a basic usage or a complete reference.
If you are thinking about
flash videos, it’s not a good idea using them anymore. As little as you use flash, better for you. It’s promised to be deprecated soon. iPhones, iPads and lots of other devices do not support flash anymore.
After covering all the content of this and the previous article, we can see that when working on markdown files, if we want to do something that is not by the books, we just need give it a try! As a matter of fact, most of them will work!
That's all folks!
We hope to have been helpfull! Please, if you enjoyed this article, leave a comment to let us know!
If you have any questions or suggestions, please feel free to get in touch with us by filling our contact form.
- ⇢ How to publish your website on GitHub
- ⇢ How to publish Project Websites on GitHub
- ⇢ Markdown Tips & Tricks - Thinking Outside the Box
- ⇢ Markdown Tips & Tricks - Part 2
- ☆ GitHub
- ☆ GitHub Pages
- ☆ Jekyll
- ☆ GitHub Flavored Markdown
- ☆ Jekyll Documentation
- ☆ Markdown
- ☆ Kramdown
- ★ Art work: Virtua Creative
- ★ Illustrations: we have downloaded from Freepik the original box and the original bulb.
Last update: 03/30/2016 - 20:47h.