A great blog post goes beyond text. This post demonstrates how to use rich media blocks including images, videos, bookmarks, and embedded code playgrounds.

Images are rendered with lazy loading and preserved aspect ratios. You can add images by using the standard image block in Notion.

Images support captions which appear below the image. They are automatically constrained to a maximum width of 720px for optimal readability.

You can embed YouTube videos directly in your posts. The library automatically parses YouTube URLs and converts them into embedded players.

YouTube: Build a Blog with Next.js

Both standard YouTube URLs and short youtu.be links are supported. Videos are rendered in a responsive container that adapts to the page width.

Bookmarks display a rich preview card with the page title, description, favicon, and preview image. They are automatically enriched with OpenGraph metadata.

Bookmark: Next.js Documentation

Bookmark: Notion API Reference

Bookmarks are perfect for linking to external resources, documentation, or related articles.

The library supports embedding interactive code playgrounds from CodeSandbox and CodePen.

Embed: React Counter Example on CodeSandbox

Embed: CSS Animation on CodePen

Embeds are rendered as responsive iframes that allow readers to interact with live code directly in your blog post.

The best blog posts combine different media types. Start with an image to catch attention, use videos for complex tutorials, bookmarks for references, and embeds for interactive demos.

Remember that each media block supports captions, so always add descriptive text to improve accessibility and context.