# Links and Media

This page covers links, bare URLs, email, image size and alignment, video, and YouTube/Vimeo embeds.

## Links

| Source | Output |
|---|---|
| `[text](https://example.com)` | `<a href="..." target="_blank">text</a>` |
| `[text](https://example.com "Title")` | Adds a `title` attribute (single or double quotes) |
| `https://example.com` | Converted to a link whose text is the URL |
| `me@example.com`, `mailto:me@example.com` | `<a href="mailto:me@example.com">` |

| Rule | Detail |
|---|---|
| Target | Every link is `target="_blank"`; not configurable |
| No spaces in the URL | `[t](https://a.com b)` is not a link; only the URL inside is auto-linked and the rest stays literal |
| Text and URL must be non-empty | `[](url)` and `[text]()` stay literal |
| Bare URLs | Only `http://` and `https://` are matched; a URL wrapped in quotes (`"https://..."`) is not converted |

## Images

| Source | Output |
|---|---|
| `![alt](image.png)` | `<img alt="alt" src="image.png">` |
| `![alt](image.png "Title")` | Adds `title` |

### Size and Alignment (extended mode)

Follow the image syntax directly with a pair of parentheses:

| Source | Result |
|---|---|
| `![a](x.png)(300x200)` | 300px wide, 200px high |
| `![a](x.png)(50%x)` | Width only |
| `![a](x.png)(x200)` | Height only |
| `![a](x.png)(300x200 left)` | Adds `float: left`; `right` works the same way |
| `![a](x.png)(300)` | Not valid; `(300)` stays as text |

Width and height can be separated by `x`, `*` or spaces; unitless numbers get `px`, values with a unit such as `%` are used as-is. The result goes into the `<img>` inline `style`. Standard mode consumes the parentheses without applying them.

## Video

When an image URL ends in `.mp4` or `.mov`, the output is `<video controls>` with a `<source>` of the matching `type` (`video/mp4`, `video/quicktime`). The alt text is dropped and the title goes into `title`.

## YouTube and Vimeo Embeds (extended mode)

A link or bare URL pointing at YouTube or Vimeo becomes a preview card:

| Element | Content |
|---|---|
| `<a>` | The original link |
| `<section class="more">` | Thumbnail and play icon; clicking hides it and shows the iframe |
| `<iframe loading="lazy">` | A 640px-wide player, initially `display: none` |

| Platform | Supported URLs | Thumbnail source |
|---|---|---|
| YouTube | `youtu.be/ID`, `youtube.com/watch?v=ID`, `/embed/ID`, `/v/ID` (11-character ID) | `i.ytimg.com/vi/ID/mqdefault.jpg` |
| Vimeo | `vimeo.com/ID`, `/channels/.../ID`, `/groups/.../videos/ID`, `/album/.../video/ID` | `vimeo.com/api/v2/video/ID.json` |

Vimeo thumbnails are fetched with a **synchronous** XHR: every conversion blocks the main thread until the request finishes, and the thumbnail is empty if the request fails. With many Vimeo links, the preview stutters noticeably after each keystroke.
