67

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?

nelsonic
  • 31,111
  • 21
  • 89
  • 120
Matt
  • 5,573
  • 4
  • 33
  • 37
  • [markdown-youtube](https://github.com/Exyht/markdown-youtube/tree/master) is in JS & PHP. I think you can easily do something like this in C#. – Hasib Mahmud Feb 06 '15 at 13:20

6 Answers6

135

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.stack.imgur.com/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.stack.imgur.com/XCRlR.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

Notes:

nelsonic
  • 31,111
  • 21
  • 89
  • 120
29

You can use inline 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
sloth
  • 99,095
  • 21
  • 171
  • 219
  • Ahh my mistake - the url must be http://www.youtube.com/v/theVideoID?html5=1 ... or rather, use the API, not the web site with the watch parameter – Robert Achmann Mar 12 '15 at 15:44
  • Very nice but using that iframe breaks the same origin policy. This post has the solution to this. http://stackoverflow.com/questions/20498831/refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin – Eat at Joes Feb 16 '16 at 23:13
  • I believe this is the ideal correct answer since, as you point out, Markdown has always allowed HTML literals. Grab the 'embed' snippet that YouTube kindly provides (currently in the 'Share' options below a video). The snippet uses an ` – DaveGauer Sep 13 '16 at 16:53
2
<iframe width="560" height="315" src="https://www.youtube.com/embed/-mUJnKI3ipI" frameborder="0" allowfullscreen></iframe>
johnnymire
  • 1,093
  • 2
  • 12
  • 25
1

Markdown won't let you embed videos, Basically the answers posted here are explaining to have a image link, which is clearly not what an embed means. So the answer to whether you can embed a video or not is "NO You can't".

Darwin
  • 11
  • 1
0

You should be able to use the HTML5 <video> element. Someone tell me if this doesn't work.

(Just spotted this, many years late :-) , as I want to add video support to my md2pptx Markdown to PowerPoint open source tool.)

Martin Packer
  • 648
  • 4
  • 12
-6

What about the syntax for embedding image, applied to other media?

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

Oembed is interesting to make embedding easier: users just have to paste the URL instead of an iframe code. For video, it could be

![MyVideo](http://www.youtube.com/watch?v=TheVideoID)
Romain
  • 1
  • 2
  • 2
    This doesn't work. You can do something similar to link to the video with one of its image previews: `[![Video Label](http://img.youtube.com/vi/TheVideoID/0.jpg)](http://www.youtube.com/watch?v=TheVideoID)` – accidental_PhD Feb 11 '15 at 18:56