Welcome to this interactive article showcasing all the rich media features available! This article demonstrates how you can enhance your content with audio, video, images, and more. ## Table of Contents Navigation Notice the **Table of Contents** in the right sidebar? It automatically generates from all headings in this article and highlights your current section as you scroll. Try clicking on any section to jump directly to it! ## Audio Player Demo Here's an example of our custom audio player. You can play, pause, adjust volume, and seek through the audio: ### Audio Player Features: - ✅ Play/Pause controls - ✅ Progress bar with time display - ✅ Volume control with mute/unmute - ✅ Keyboard shortcuts (+/- for zoom) --- ## Video Embeds ### YouTube Video Example Our video embed component supports YouTube videos. Just paste the URL and it creates a responsive 16:9 player: The video player includes: - 🎥 Fullscreen support - 📱 Responsive design (16:9 aspect ratio) - ⚡ Fast loading with iframe optimization ### Vimeo Video Example We also support Vimeo videos seamlessly: --- ## Image Lightbox Click on any image below to open it in a **fullscreen lightbox** with zoom controls: ![Beautiful landscape](https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=500&fit=crop) ### Lightbox Features: - 🖼️ Click any image to expand - 🔍 Zoom in/out (50% to 300%) - ⌨️ Keyboard navigation (ESC to close, +/- to zoom) - 🖱️ Click outside to close - 📐 High-quality image rendering Here's another image to try: ![City skyline at night](https://images.unsplash.com/photo-1514565131-fce0801e5785?w=800&h=500&fit=crop) --- ## Reading Experience Features ### Font Size Adjustment Notice the **font size adjuster** button near the top of the article? You can customize your reading experience with 4 different text sizes: - Small (14px) - Medium (16px) - default - Large (18px) - Extra Large (20px) ### Reading Progress Bar The **blue progress bar** at the very top of the page shows how much of the article you've read. Watch it move as you scroll! ### Bookmark This Article See the bookmark button at the top? Click it to save this article to your **Bookmarks** page for easy access later. --- ## Code Examples Our articles support syntax-highlighted code blocks: ```javascript // Example: React component with hooks import { useState, useEffect } from 'react' export function ExampleComponent() { const [count, setCount] = useState(0) useEffect(() => { console.log(`Count updated: ${count}`) }, [count]) return ( ) } ``` And inline code like `npm install` or `const greeting = "Hello World"`. --- ## Lists and Formatting ### Unordered Lists - First item with **bold text** - Second item with *italic text* - Third item with `inline code` - Nested items: - Sub-item one - Sub-item two ### Ordered Lists 1. First step in the process 2. Second step with important details 3. Third step to complete the task --- ## Blockquotes > "The best way to predict the future is to invent it." > > — Alan Kay Blockquotes are perfect for highlighting important quotes or call-out information. --- ## Tables Here's a comparison table with our styling: | Feature | Basic Plan | Pro Plan | Enterprise | |---------|-----------|----------|------------| | Storage | 10 GB | 100 GB | Unlimited | | Users | 1 | 5 | Unlimited | | Support | Email | Priority | 24/7 Phone | | Price | $9/mo | $29/mo | Custom | --- ## Social Sharing Don't forget to **share this article** using the share buttons at the top! Available on: - Twitter - Facebook - LinkedIn - Or copy the direct link --- ## Progress Bars (Custom Component) We even have custom progress bars for showing statistics: --- ## Final Thoughts This article demonstrates the powerful features available to make your content more engaging and interactive. From multimedia support to enhanced reading experiences, every feature is designed to provide the best possible experience for readers. ### Try These Features: 1. ✅ Click images to open lightbox 2. ✅ Play the audio/video embeds 3. ✅ Adjust your font size 4. ✅ Bookmark this article 5. ✅ Use the table of contents 6. ✅ Share on social media --- ## Additional Images More images to test the lightbox feature: ![Mountain peak](https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=500&fit=crop) ![Ocean waves](https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&h=500&fit=crop) ![Forest path](https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=500&fit=crop) --- **Thank you for exploring these features!** We hope this enhances your reading experience and makes content more engaging and accessible.