Confirm?

Are you sure you want to proceed?
?

Youtube Clone Website

Clone & Customize via AI

MudBlazor video browser page showcases a responsive drawer menu, a main video player with details, search and ordering filters, and paginated video cards styled with Bootstrap classes.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Responsive navigation drawer with menu links - AppBar with search input and action icons - Video player section showing thumbnail and metadata - Like and subscribe buttons - Comments list simulation - Sidebar showing next videos - Video grid with pagination and ordering select ## Key components - MudDrawerContainer, MudDrawer, MudNavMenu, MudNavLink - MudAppBar, MudIconButton, MudTextField, MudSpacer - MudGrid, MudItem, MudPaper, MudButton, MudCard, MudCardMedia, MudText - MudSelect, MudSelectItem, MudPagination ## How it works - Drawer open state toggled with button - Two-way binds for search text, ordering, and pagination - Filtered and paged videos computed from internal list with LINQ - Video selection updates displayed video - Comments and next videos use simple mock data ## Styling - Uses MudBlazor components with default theming - Bootstrap utility classes (container-fluid, d-flex, me-2, text-muted) used for layout and spacing - Responsive grid layout with MudGrid and MudItem ## Reuse steps 1. Add MudBlazor NuGet package and register services in Program.cs 2. Import MudBlazor namespaces 3. Include MudThemeProvider in app 4. Copy VideoModel or replace with real data source 5. Add YouTubeClone.razor component and route 6. Wire data and services for dynamic content ## Limitations & next steps - Uses mock video and comment data; no backend integration - Lacks auth and user state management - Simplified video player using image placeholder - Extend with real video playback, user actions, and API calls