How to embed a Youtube Video in Markdown presentation


Embeding a youtube video in a markdown presentation
A Youtube video rendered in a Slide, in a Slideas presentation

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.

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

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

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

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.

The HTML solution

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

<iframe width="1280" height="720" src="https://www.youtube.com/embed/E5Jg4Wm9b7o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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=E5Jg4Wm9b7o This 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