Best IT Recipes

Is it possible to embed Youtube / Vimeo video in Markdown using C # Markdown library

I am writing a web application in .NET MVC4 and would like to use Markdown. I understand that there are several C # Markdown open source libraries, but I have not found one that explicitly supports embedding youtube or Vimeo videos inside Markdown text.

Does anyone know if this is possible?

+51
c # youtube markdown asp.net-mvc-4
Jan 07 '13 at 9:02 on
source share
4 answers

Standard markdown solution (not iFrame!)

Using an iframe is not an “obvious” solution ... especially if your Markdown analyzer (or publishing platform) doesn’t support embedding content from another website ... Instead, you can "fake it" by adding a valid linked-image in your Markdown file using this format:

[![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")

Markdown Explanation

If this section of the markdown looks complicated, break it into two parts:

picture
![image alt text](http//example.io/link-to-image)
wrapped in a link
[link text](http//example.io/my-link "link title")

An example of using a valid YouTube markdown and thumbnail:

Everything Is AWESOME

We get a thumbnail image directly from YouTube and contact the real video, so when a person clicks on the image / thumbnail, they get into the video.

The code:

[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

OR If you want to give readers a visual hint that the image / thumbnail is actually a playable video, take your own screenshot of the video on YouTube and use it instead as a thumbnail.

Example of using a screenshot with video controls as a visual hint:

Everything Is AWESOME

The code:

[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

Clear benefits

Although this requires several additional steps ( a ) to take a screenshot of the video and ( b ) upload it so that you can use the image as a thumbnail, it has 3 obvious advantages :

  1. The person reading your markdown (or the resulting HTML page) has a visual hint that he can watch the video (video controls encourage clicks)
  2. You can select a specific frame in the video to use as a thumbnail (which makes your content more attractive )
  3. You can specify a specific time in the video from which playback will start when you click on the link . (in our case, from 35 seconds)

Creating a screenshot takes a few seconds, and for each OS there are keyboard shortcuts that copy the screenshot to the clipboard, which means that you can paste it for even faster loading.

Not only C#

And since this is a 100% standard markdown, it works everywhere (not just for the C# parser!) ... try it on GitHub, Redit or Ghost!

Vimeo

This approach also works with Vimeo video.

example

Little red ridning hood

The code

 [![Little red ridning hood](http://i.imgur.com/7YTMFQp.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

Notes:

  • How to take a screenshot : http://www.take-a-screenshot.org/ ( all platforms !)
  • Upload image thumbnail : after you take your screenshot, you can drag it to imgur.com to upload it and use it immediately as a thumbnail; couldn't be easier!
  • YouTube thumbnail information. How to get thumbnail of YouTube video from YouTube API?
  • Markdown format borrowed / changed / expanded from: Insert YouTube video
+93
Apr 25 '15 at 8:06
source share

You can use the embedded HTML to embed your video.

 # this is a *markdown* document <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/watch?v=TheVideoID?autoplay=1" frameborder="0" allowfullscreen></iframe> with a **youtube** video embedded
+24
Jan 11 '13 at 11:06 on
source share
 <iframe width="560" height="315" src="https://www.youtube.com/embed/-mUJnKI3ipI" frameborder="0" allowfullscreen></iframe>
+2
Nov 01 '16 at 21:26
source share

What about the syntax for embedding images applied to other media?

 ![MyImage](https://example.com/image.png)

Oembed is interesting to simplify implementation: users just need to insert a URL instead of iframe code. For a video, it could be

 ![MyVideo](http://www.youtube.com/watch?v=TheVideoID)
-5
03 Feb '14 at 9:15
source share


More articles:


All Articles