x/wiki
1
0
Fork 0
mirror of https://github.com/waynesutton/markdown-site.git synced 2026-01-12 04:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Embed YouTube videos and Twitter/X posts directly in markdown

Browse Source 
Domain whitelisting for security (only trusted domains allowed)
This commit is contained in:
Wayne Sutton
2026-01-01 14:31:56 -08:00
parent 1eaec05fec
commit 2858b6149b
14 changed files with 1466 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
content/blog/markdown-with-code-examples.md
View File

@@ -332,6 +332,68 @@ For best results:
- Author avatars: 200x200px (displays as circle)
- Card thumbnails: Square images work best (auto-cropped to center)
## Embeds
Embed YouTube videos and Twitter/X posts directly in your markdown. Only YouTube and Twitter/X domains are allowed for security.
### YouTube
Embed a YouTube video using an iframe:
```html
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video"
allowfullscreen>
</iframe>
```
Result:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video" allowfullscreen></iframe>
### Twitter/X
Embed a tweet using the Twitter embed URL:
```html
<iframe
src="https://platform.twitter.com/embed/Tweet.html?id=20"
width="550"
height="250">
</iframe>
```
Result:
<iframe src="https://platform.twitter.com/embed/Tweet.html?id=20" width="550" height="250"></iframe>
### Privacy-enhanced YouTube
Use `youtube-nocookie.com` for privacy-enhanced embeds:
```html
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
title="YouTube video"
allowfullscreen>
</iframe>
```
### Allowed domains
For security, only these domains are whitelisted:
- `youtube.com`, `www.youtube.com`
- `youtube-nocookie.com`, `www.youtube-nocookie.com`
- `platform.twitter.com`, `platform.x.com`
Iframes from other domains are silently blocked.
## Nested lists
Indent with two spaces for nested items:

23
content/pages/changelog-page.md
View File

@@ -10,6 +10,29 @@ layout: "sidebar"
All notable changes to this project.
![](https://img.shields.io/badge/License-MIT-yellow.svg)
## v2.4.0
Released January 1, 2026
**YouTube and Twitter/X embed support**
- Embed YouTube videos and Twitter/X posts directly in markdown
- Domain whitelisting for security (only trusted domains allowed)
- Whitelisted domains: `youtube.com`, `www.youtube.com`, `youtube-nocookie.com`, `www.youtube-nocookie.com`, `platform.twitter.com`, `platform.x.com`
- Auto-adds `sandbox` and `loading="lazy"` attributes for security
- Non-whitelisted iframes silently blocked
- Works on both blog posts and pages
- Embeds section added to markdown-with-code-examples.md with usage examples
**Technical details:**
- Added `ALLOWED_IFRAME_DOMAINS` constant in `src/components/BlogPost.tsx`
- Added `iframe` to sanitize schema with allowed attributes
- Added custom iframe component handler with URL validation
- Added `.embed-container` CSS styles for responsive embeds
Updated files: `src/components/BlogPost.tsx`, `src/styles/global.css`, `content/blog/markdown-with-code-examples.md`, `files.md`, `TASK.md`, `changelog.md`, `content/pages/changelog-page.md`
## v2.3.0
Released December 31, 2025