Markdown Tips & Tricks - Part 2

Part 2 - Embedding videos.

October 25th, 2015   By Marcia Ramos
Markdown Tips & Tricks - Part 2

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 <video> 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!

  Case A: <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.

Step-by-Step

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 <div> tag:

.... <!-- post content -->

<div class="iframe_container">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/E-ONNjFoOx0" frameborder="0" allowfullscreen></iframe>
</div>

.... <!-- post content -->

Third: instead of leaving the atribute allowfullscreen with no value, give it a value of “allowfullscreen”: allowfullscreen="allowfullscreen".

Fourth: Add a space in between opening and closing <iframe> tags: instead of <iframe></iframe>, make sure it looks like that:

<iframe> </iframe>.

Fifth: You can remove the proprieties of width and 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:

.... <!-- post content -->

<div class="iframe_container">
  <iframe src="http://www.youtube.com/embed/E-ONNjFoOx0" frameborder="0" allowfullscreen="allowfullscreen"> </iframe>
</div>

.... <!-- post content -->


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:

.iframe_container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 - this is responsive by adjusting the hight according to the width! */
	padding-top: 25px;
	height: 0;
}

.iframe_container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


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 E-ONNjFoOx0.

  Case B: <video> Tags

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 html 5 <video> tag.

Adding a <video> tag is very straight forward, exactly as we did for <div> or <hr> tags on the previous article. Just add a <video> tag to your markdown text and you are good to go!

.... <!-- post content -->

<div class="video_container">
  <video controls="controls" allowfullscreen="true" poster="path/to/poster_image.png">
    <source src="path/to/video.mp4" type="video/mp4">
  </video> 
</div>

.... <!-- post content -->


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:

.video_container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.video_container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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: .mp4, .ogg and .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.

Well done!

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!

Enjoy! :dancers: :smiley: :thumbsup:

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.

Thanks for reading! Stay tuned for the next article: follow us on Twitter, Google+ or subscribe to our YouTube Channel

References

Image Credits

  • ★ Art work: Virtua Creative
  • ★ Illustrations: we have downloaded from Freepik the original box and the original bulb.

Last update: 03/30/2016 - 20:47h.

Virtua Creative

Virtua Creative Technology