Markdown Youtube Video

 



  • YouTube allows users to add some text formatting while submitting a comment. You can make your YouTube comment stand out by using bold, italics and strikethrough. Doing this can help your comment to get more visibility and likes. Hence, there are slightly higher chances for the creator to respond to your comment. YouTube uses specific.
  • Embed youtube video to github, gitlab, markdown.

Being able to simply add a Youtube Video (or from another similar video platform like Vimeo) in a slide is a must-have. Unfortunately, it is more difficult than we can think.

You can include videos published on either YouTube or Vimeo within a tutorial using the standard Markdown image syntax. Note that any valid YouTube or Vimeo URL will work. For example, the following are all valid examples of video embedding. Embed youtube video to github, gitlab, markdown.

There is no official good way to embed a Youtube Video in a Markdown document.

Existing workarounds

You have two main ways to add a Youtube Video:

The pure Markdown solution

Markdown Youtube Video

As explained in this StackOverflow question, the idea is to combine a link with a « preview » image of the video:

It looks quite good but unfortunately, we cannot use it directly because the video is accessible through a link and will either load in another window or replace the current contents.

Videos

The HTML solution

Markdown

In theory, all Markdown parsers should allow inserting HTML code in a Markdown document.

But while it works, it presents two issues:

  • This is quite a lot of code and it creates « visual pollution » in your document. Markdown has been invented in order to avoid to write HTML, this is not to insert big blocks of HTML inside.
  • It creates an iFrame. iFrames are more difficult to layout and to make responsive in an HTML document but this is not the biggest concern. Each Youtube iFrame increase a lot the page weight and impacts the general application responsiveness.

Trying to improve this situation in Slideas

Providing a simpler syntax

The idea here is to not reinvent the wheel and instead to reuse the syntax already known for images. Example:https://www.youtube.com/watch?v=E5Jg4Wm9b7oThis will be then the responsibility of the Markdown parser and renderer to detect these videos and to do all the hard work.

Maximising performances

The technique used is the one detailed here. Instead of fully loading the Youtube Video in an iFrame, we just load a preview image of the video.The preview image is just a few dozens of kilobytes and can be resized easily to fit inside the slide.

Getting a clean and customizable result

In addition to the preview image, we add a small play button to mimic a minimalistic video player. There is no intention to fully replicate the Youtube video player but just to indicate to the user that this is a video.

Both video and play button will be customizable through CSS

You may also like:

Slideas 1.2beta1: Html Export, new themes, and easier to use

Markdown Youtube Videos

Slideas 1.2: Html Export, new themes, and easier …

Slideas 1.1 is available: More Themes, Features and bug fixes

Slideas 1.1: Custom themes support, more themes …

How to convert an existing Google Slides/Keynote/PowerPoint theme to Slideas Markdown Presentation template?

In this tutorial, we are going to see the various …

Slideas 1.0 is available in the Mac App Store

Slideas 1.0 is available I am proud to announce …

I usually struggle to remember all the parameters for inserting links and especially images to the markdown which is the default format for GitHub, GitLab comments and documentation files and for this blog as well. Moreover, neither GitHub nor GitLab supports inserting videos.

One of the workarounds for this issue with videos is to insert an image of for the video wrapped in a link pointing to the video location. For markdown files images are inserted in the following way:

whereas we use the following markup to insert links

So, combining these two markups allows us inserting image with link to the markdown

Embed Youtube Video Markdown

Good! Now we know how to have clickable images in our markdown which will redirect us to some link. But how can we do the same trick with youtube video?

Inserting youtube clickable image to markdown

Let’s try to do the same thing with Audi R8 youtube video.

First, we need to grab an image from the video. Hopefully there is and API to do that. You will need vide id which is alphanumeric sequence in the urls v parameter. In the example above it is KOxbO0EI4MA. The link to image will be

For Audi R8 video the image is going to be

The only one thing is left, which is combining image with url

Markdown Youtube Video Editor

Great! We have just created a clickable image that can be inserted in the markdown and used in GitHub or GitLab comments. So, now you can praise awesome commits with funny cat videos.

Automatic Conversion

Remembering the markdown specifics to create clickable images is quite hard. So there is a web tool that’s doing that automatically. Navigate to the embedyoutube. You will see

Youtube Video In Markdown

Just put there your youtube link, alt text and title for the image and you will get the markdown that is ready to be pasted to the Git comment or markdown.

R Markdown Youtube Video

To conclude, we learned how we can embed youtube links into markdown files and GitHub and GitLab comments using image and link markup, also we learned how to do it automatically using embedyoutube.org