Markdown Youtube Video

Posted on  by admin

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.

In this video we will discuss what Markdown is, what it is used for and we will jump into VSCode and learn the entire syntax in around 10 minutes. 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. 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. MARKDOWN FOR YOUTUBE VIDEOS - Posted in HTML by baspectrum. They can't be added directly but you can add an image with a link to the video like this.

DownloadYoutube

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:

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.

Markdown youtube videos

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

Markdown Youtube Video

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

Embed Youtube Video Markdown

Markdown

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 …

Markdown Youtube Video Editor

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 …