Welcome to the comprehensive showcase of Storyteller’s rich media embed capabilities! This article demonstrates how to seamlessly integrate various types of content into your blog posts using simple markdown shortcodes. From videos and maps to documents and code snippets, Storyteller makes embedding rich media effortless.
YouTube Videos
Embed YouTube videos using the #youtube shortcode followed by the video ID:
Vimeo Videos
Embed Vimeo videos using the #vimeo shortcode:
Wistia Videos
Embed Wistia videos using the #wistia shortcode:
Google Maps
Embed Google Maps using the #googlemaps shortcode with a query or URL:
PDFs
Embed PDF documents using the #pdf shortcode:
GitHub Gists
Embed GitHub Gists using the #gist shortcode:
Asciinema Recordings
Embed Asciinema terminal recordings using the #asciinema shortcode:
SoundCloud Tracks
Embed SoundCloud tracks using the #soundcloud shortcode:
How It Works
These shortcodes are processed by custom remark plugins that transform them into proper HTML embeds. Each plugin handles the specific requirements of the platform, including:
- Proper iframe sizing and responsive design
- Loading optimizations
- Privacy considerations
- Accessibility features
Usage Tips
- Always test your embeds in both light and dark themes
- Ensure the content you’re embedding is appropriate for your audience
- Check that embedded content loads properly on mobile devices
- Consider the impact on page load times when using multiple embeds
Customization
The embed plugins are highly customizable. You can modify the appearance and behavior by editing the corresponding plugin files in the src/plugins/ directory. Each plugin is designed to be lightweight and focused on a specific embed type.
Happy embedding! 🎉
