Embedding YouTube Videos

You can easily embed YouTube videos into your Markdown content. You Tube provides convenient embedding links that can be used to host YouTube videos directly in your own Html content with the abililty to play inline and to jump to YouTube.

In order to use this feature you need one of the following:

  • A YouTube Watch Url
  • A YouTube Embed Url
  • A YouTube ShortCut Url (youtu.be)
  • A YouTube Video Id only

Markdown Monster can parse all of these using the icon on the toolbar to embed a video:

To do this:

  • Pick up a YouTube Url or Id
  • Copy to the clipboard
  • Position the cursor in your document
  • Click on the Embed in YouTube Toolbar button
  • The Video Id is automatically picked up
  • Or paste it explicitly and MM fixes up the URL to get the Id.
  • You see a preview
  • Click Embed Video to embed the video into the document

Requires that Script and iframe Rendering is Enabled

YouTube videos rely on <iframe> embedding which by default along with <script> tags is disabled in MM. To render these you need to enable the Allow Script Tags in Markdown option on the menu or in Settings.

You can enable the setting here:

What is embedded

YouTube's embedding mechanism is via an <iframe> hosted on YouTube. MM creates the markup for the IFrame to embed into the document.

An embedded video looks something like this in your Markdown document:

* Go to YouTube and Select the Video
* Copy any YouTube URL or Video Id
* Use the **Embed YouTube Video** Tool Button to embed

<!-- this is the embedded video minus this comment -->

<div style="position: relative; width: 100%; padding-bottom: 56.25%">
<iframe src="https://www.youtube.com/embed/jgEYn-ldr30" 
        title="Web Load Testing with West Wind WebSurge 2" frameborder="0" allowfullscreen
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        style="position: absolute; width: 100%; height: 100%;">
</iframe>
</div>

<!-- end embedded video -->


### Types of Videos to Add

The video is embedded with a wrapping <div> tag and style tags that try to stretch the video across the full of the Html content/element, so the video will appropriately resize. Y

Embedded Videos only work if Markdown Rendering supports embedded <iframe>

Markdown Monster's preview easily renders embedded videos as it supports embedded HTML and scripts (via a AllowRenderScriptTags setting). That doesn't guarantee that it works on a target service that renders your Markdown outside of MM.

Embedded videos works only if your Markdown server provider supports embedded Html and <iframe> tags as part of Markdown rendering.

For example, GitHub does not allow embedded <iframe> tags to be rendered, so embedded videos do not work on GitHub (they show as HTML markup). However, most Blog Engines like WordPress and Medium or static site renderers like Jekyll or Statiq do support embedded HTML, so you can use it with those. Make sure you test this out with your final Markdown rendering platform.

A workaround for platforms that don't support this, is to embed a clickable image that takes you directly to YouTube using the default video title screen:

[![title here](https://img.youtube.com/vi/VIDEO_ID/0.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)

© West Wind Technologies, 2016-2024 • Updated: 02/14/22
Comment or report problem with topic