Search code examples
c#asp.net-mvc-4youtubemarkdown

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

I'm writing a web app in .NET MVC4 and would like to use Markdown. I understand there are a few open source C# Markdown libraries, but I haven't found one that obviously supports embedding youtube or Vimeo videos inside Markdown text.

Does anyone know if it's possible?

Solution

  • The Solution using Standard Markdown ( not iFrame! )

    Using an iframe is not the "obvious" solution... especially if the Markdown parser (or publishing platform) you are using does not support inlining content from a different website ... Instead you can "fake it" by including 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")

    Explanation of the Markdown

    If this markdown snippet looks complicated, break it down into two parts:

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

    Example using Valid Markdown and YouTube Thumbnail:

    Everything Is AWESOME

    We are sourcing the thumbnail image directly from YouTube and linking to the actual video, so when the person clicks the image/thumbnail they will be taken to the video.

    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 cue that the image/thumbnail is actually a playable video, take your own screenshot of the video in YouTube and use that as the thumbnail instead.

    Example using Screenshot with Video Controls as Visual Cue:

    Everything Is AWESOME

    Code:

    [![Everything Is AWESOME](https://i.sstatic.net/q3ceS.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

     Clear Advantages

    While this requires a couple of extra steps (a) taking the screenshot of the video and (b) uploading it so you can use the image as your thumbnail it does have 3 clear advantages:

    1. The person reading your markdown (or resulting html page) has a visual cue telling them they can watch the video (video controls encourage clicking)
    2. You can chose a specific frame in the video to use as the thumbnail (thus making your content more engaging)
    3. You can link to a specific time in the video from which play will start when the linked-image is clicked. (in our case from 35 seconds)

    Taking a screenshot takes a few seconds and there are keyboard shortcuts for each OS which copy the screenshot to your clipboard which means you can paste it for even faster upload.

    Not Only C#

    And since this is 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 videos

    Example

    Little red ridning hood

    Code

    [![Little red ridning hood](https://i.sstatic.net/XCRlR.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

    Notes: