> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mixus.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Video Gallery

> Video tutorials, demos, and walkthroughs for mixus

export const VideoGallery = ({category = 'All'}) => {
  const [videos, setVideos] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [selectedVideo, setSelectedVideo] = React.useState(null);
  React.useEffect(() => {
    async function fetchVideos() {
      try {
        setLoading(true);
        const response = await fetch('https://app.mixus.ai/api/docs/youtube-videos');
        if (!response.ok) {
          throw new Error(`Failed to fetch videos: ${response.status}`);
        }
        const data = await response.json();
        if (data.success && data.data) {
          let filteredVideos = data.data;
          if (category && category !== 'All') {
            filteredVideos = data.data.filter(video => video.category === category);
          }
          setVideos(filteredVideos);
        } else {
          throw new Error(data.error || 'Failed to fetch videos');
        }
      } catch (err) {
        console.error('Error fetching videos:', err);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchVideos();
  }, [category]);
  if (loading) {
    return <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        {[...Array(6)].map((_, i) => <div key={i} className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden animate-pulse">
            <div className="bg-gray-200 dark:bg-gray-700 aspect-video" />
            <div className="p-4 space-y-2">
              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2" />
            </div>
          </div>)}
      </div>;
  }
  if (error) {
    return <div className="p-4 border border-red-200 dark:border-red-800 rounded-lg bg-red-50 dark:bg-red-900/20">
        <p className="text-red-600 dark:text-red-400">
          Error loading videos: {error}
        </p>
        <p className="text-sm text-red-500 dark:text-red-500 mt-2">
          Please try refreshing the page or contact support if the issue
          persists.
        </p>
      </div>;
  }
  if (videos.length === 0) {
    return <div className="p-8 text-center border border-gray-200 dark:border-gray-700 rounded-lg">
        <p className="text-gray-600 dark:text-gray-400">
          No videos found in this category.
        </p>
      </div>;
  }
  return <div className="not-prose">
      {}
      <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        {videos.map(video => <div key={video.id} className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer" onClick={() => setSelectedVideo(video)}>
            {}
            <div className="relative aspect-video bg-gray-100 dark:bg-gray-800">
              <img src={video.thumbnail} alt={video.title} className="w-full h-full object-cover" loading="lazy" />
              {}
              <div className="absolute inset-0 flex items-center justify-center bg-black/20 hover:bg-black/30 transition-colors">
                <svg className="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </div>
              {}
              {video.duration && <div className="absolute bottom-2 right-2 bg-black/75 text-white text-xs px-2 py-1 rounded">
                  {video.duration}
                </div>}
            </div>

            {}
            <div className="p-4">
              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
                {video.title}
              </h3>
              <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                {video.viewCount && <span>
                    {parseInt(video.viewCount).toLocaleString()} views
                  </span>}
                {video.publishedAt && <span>
                    {new Date(video.publishedAt).toLocaleDateString()}
                  </span>}
              </div>
            </div>
          </div>)}
      </div>

      {}
      {selectedVideo && <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4" onClick={() => setSelectedVideo(null)}>
          <div className="bg-white dark:bg-gray-900 rounded-lg max-w-5xl w-full max-h-[90vh] overflow-hidden" onClick={e => e.stopPropagation()}>
            {}
            <button onClick={() => setSelectedVideo(null)} className="absolute top-4 right-4 z-10 p-2 bg-black/50 hover:bg-black/70 text-white rounded-full transition-colors" aria-label="Close video">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

            {}
            <div className="aspect-video w-full">
              <iframe src={selectedVideo.embedUrl} className="w-full h-full" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title={selectedVideo.title} />
            </div>

            {}
            <div className="p-6">
              <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
                {selectedVideo.title}
              </h2>
              {selectedVideo.description && <p className="text-gray-600 dark:text-gray-400 line-clamp-3">
                  {selectedVideo.description}
                </p>}
              <div className="mt-4 flex gap-4">
                <a href={selectedVideo.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">
                  Watch on YouTube
                </a>
              </div>
            </div>
          </div>
        </div>}
    </div>;
};

Comprehensive collection of video tutorials, feature demonstrations, and step-by-step guides to help you master mixus.

## Video Gallery

Browse our complete video library with interactive filtering and playback. Videos are automatically loaded from our YouTube channel and organized by category.

<VideoGallery category="All" />

## Watch on YouTube

Visit our official YouTube channel [@mixusapp](https://www.youtube.com/@mixusapp) to watch videos directly on YouTube, subscribe for updates, and join the community discussions.

## Video Topics

Our video library covers all aspects of the mixus platform, from beginner tutorials to advanced features. Videos are automatically categorized to help you find exactly what you're looking for:

### 🚀 Getting Started

Perfect for new users learning the basics of mixus

### 🤖 AI Agents

Create and manage autonomous AI workflows

### 🔌 Integrations

Connect mixus with your favorite tools and services

### 👥 Team Features

Collaboration and sharing capabilities

### ⚡ Advanced Features

Power user features and advanced configurations

### 💼 Use Cases

Real-world examples and case studies

## Features

### 🎥 Interactive Video Player

* In-app playback with professional video player
* Variable playback speeds and quality options
* Mobile-optimized viewing experience
* Direct links to related documentation

### 🏷️ Smart Categorization

Videos are automatically organized by topic to help you find what you need:

* **Getting Started**: Platform basics and first steps
* **AI Agents**: Automation and workflow creation
* **Integrations**: Connecting external tools and services
* **Team Features**: Collaboration and sharing
* **Advanced Features**: Power user capabilities
* **Use Cases**: Real-world examples and case studies

### 📱 Responsive Design

* Works seamlessly on desktop, tablet, and mobile
* Category filtering for focused browsing
* Search and discovery features
* Dark/light mode support

## Getting Help

Have questions about a specific video or want to request new content?

* **Video Requests**: [Contact our support team](/support/contact)
* **Community Discussion**: Join conversations on [our community forums](https://community.mixus.ai)
* **Direct Feedback**: Leave comments on individual videos

## Next Steps

* [Browse getting started videos](/videos/getting-started)
* [Explore feature demonstrations](/videos/features)
* [View use case examples](/videos/use-cases)

## Related Resources

* [Getting Started Guide](/getting-started)
* [Feature Documentation](/ai-models/overview)
* [Community Forums](https://community.mixus.ai)
* [Support Center](/support/contact)